re-resizable
- Version 6.10.3
- Published
- 140 kB
- No dependencies
- MIT license
Install
npm i re-resizable
yarn add re-resizable
pnpm add re-resizable
Overview
Resizable component for React.
Index
Classes
Resizable
- appendBase
- bindEvents()
- calculateNewMaxFromBoundary()
- calculateNewSizeFromAspectRatio()
- calculateNewSizeFromDirection()
- componentDidMount()
- componentWillUnmount()
- createSizeForCssProperty()
- defaultProps
- flexDir
- getParentSize()
- onMouseMove()
- onMouseUp()
- onResizeStart()
- parentLeft
- parentNode
- parentTop
- propsSize
- ratio
- removeBase
- render()
- renderResizer()
- resizable
- resizableBottom
- resizableLeft
- resizableRight
- resizableTop
- setBoundingClientRect()
- size
- sizeStyle
- targetLeft
- targetTop
- unbindEvents()
- updateSize()
- window
Interfaces
ResizableProps
- as
- bounds
- boundsByDirection
- children
- className
- defaultSize
- enable
- grid
- gridGap
- handleClasses
- handleComponent
- handleStyles
- handleWrapperClass
- handleWrapperStyle
- lockAspectRatio
- lockAspectRatioExtraHeight
- lockAspectRatioExtraWidth
- maxHeight
- maxWidth
- minHeight
- minWidth
- onResize
- onResizeStart
- onResizeStop
- resizeRatio
- scale
- size
- snap
- snapGap
- style
Type Aliases
Namespaces
Classes
class Resizable
class Resizable extends React.PureComponent<ResizableProps, State> {}
constructor
constructor(props: ResizableProps);
property appendBase
appendBase: () => HTMLDivElement | null;
property defaultProps
static defaultProps: { as: string; onResizeStart: () => void; onResize: () => void; onResizeStop: () => void; enable: { top: boolean; right: boolean; bottom: boolean; left: boolean; topRight: boolean; bottomRight: boolean; bottomLeft: boolean; topLeft: boolean; }; style: {}; grid: number[]; gridGap: number[]; lockAspectRatio: boolean; lockAspectRatioExtraWidth: number; lockAspectRatioExtraHeight: number; scale: number; resizeRatio: number; snapGap: number;};
property flexDir
flexDir?: 'row' | 'column';
property parentLeft
parentLeft: number;
property parentNode
readonly parentNode: HTMLElement;
property parentTop
parentTop: number;
property propsSize
readonly propsSize: Size;
property ratio
ratio: number;
property removeBase
removeBase: (base: HTMLElement) => void;
property resizable
resizable: HTMLElement;
property resizableBottom
resizableBottom: number;
property resizableLeft
resizableLeft: number;
property resizableRight
resizableRight: number;
property resizableTop
resizableTop: number;
property size
readonly size: NumberSize;
property sizeStyle
readonly sizeStyle: { width: string; height: string };
property targetLeft
targetLeft: number;
property targetTop
targetTop: number;
property window
readonly window: Window;
method bindEvents
bindEvents: () => void;
method calculateNewMaxFromBoundary
calculateNewMaxFromBoundary: ( maxWidth?: number, maxHeight?: number) => { maxWidth: number | undefined; maxHeight: number | undefined };
method calculateNewSizeFromAspectRatio
calculateNewSizeFromAspectRatio: ( newWidth: number, newHeight: number, max: { width?: number; height?: number }, min: { width?: number; height?: number }) => { newWidth: number; newHeight: number };
method calculateNewSizeFromDirection
calculateNewSizeFromDirection: ( clientX: number, clientY: number) => { newWidth: number; newHeight: number };
method componentDidMount
componentDidMount: () => void;
method componentWillUnmount
componentWillUnmount: () => void;
method createSizeForCssProperty
createSizeForCssProperty: ( newSize: number | string, kind: 'width' | 'height') => number | string;
method getParentSize
getParentSize: () => { width: number; height: number };
method onMouseMove
onMouseMove: (event: MouseEvent | TouchEvent) => void;
method onMouseUp
onMouseUp: (event: MouseEvent | TouchEvent) => void;
method onResizeStart
onResizeStart: ( event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>, direction: Direction) => void;
method render
render: () => JSX.Element;
method renderResizer
renderResizer: () => JSX.Element | null;
method setBoundingClientRect
setBoundingClientRect: () => void;
method unbindEvents
unbindEvents: () => void;
method updateSize
updateSize: (size: Size) => void;
Interfaces
interface Enable
interface Enable {}
property bottom
bottom?: boolean;
property bottomLeft
bottomLeft?: boolean;
property bottomRight
bottomRight?: boolean;
property left
left?: boolean;
property right
right?: boolean;
property top
top?: boolean;
property topLeft
topLeft?: boolean;
property topRight
topRight?: boolean;
interface HandleClassName
interface HandleClassName {}
property bottom
bottom?: string;
property bottomLeft
bottomLeft?: string;
property bottomRight
bottomRight?: string;
property left
left?: string;
property right
right?: string;
property top
top?: string;
property topLeft
topLeft?: string;
property topRight
topRight?: string;
interface HandleComponent
interface HandleComponent {}
property bottom
bottom?: React.ReactElement<any>;
property bottomLeft
bottomLeft?: React.ReactElement<any>;
property bottomRight
bottomRight?: React.ReactElement<any>;
property left
left?: React.ReactElement<any>;
property right
right?: React.ReactElement<any>;
property top
top?: React.ReactElement<any>;
property topLeft
topLeft?: React.ReactElement<any>;
property topRight
topRight?: React.ReactElement<any>;
interface HandleStyles
interface HandleStyles {}
property bottom
bottom?: React.CSSProperties;
property bottomLeft
bottomLeft?: React.CSSProperties;
property bottomRight
bottomRight?: React.CSSProperties;
property left
left?: React.CSSProperties;
property right
right?: React.CSSProperties;
property top
top?: React.CSSProperties;
property topLeft
topLeft?: React.CSSProperties;
property topRight
topRight?: React.CSSProperties;
interface NumberSize
interface NumberSize {}
interface ResizableProps
interface ResizableProps {}
property as
as?: string | React.ComponentType<any>;
property bounds
bounds?: 'parent' | 'window' | HTMLElement;
property boundsByDirection
boundsByDirection?: boolean;
property children
children?: React.ReactNode;
property className
className?: string;
property defaultSize
defaultSize?: Size;
property enable
enable?: Enable | false;
property grid
grid?: [number, number];
property gridGap
gridGap?: [number, number];
property handleClasses
handleClasses?: HandleClassName;
property handleComponent
handleComponent?: HandleComponent;
property handleStyles
handleStyles?: HandleStyles;
property handleWrapperClass
handleWrapperClass?: string;
property handleWrapperStyle
handleWrapperStyle?: React.CSSProperties;
property lockAspectRatio
lockAspectRatio?: boolean | number;
property lockAspectRatioExtraHeight
lockAspectRatioExtraHeight?: number;
property lockAspectRatioExtraWidth
lockAspectRatioExtraWidth?: number;
property maxHeight
maxHeight?: string | number;
property maxWidth
maxWidth?: string | number;
property minHeight
minHeight?: string | number;
property minWidth
minWidth?: string | number;
property onResize
onResize?: ResizeCallback;
property onResizeStart
onResizeStart?: ResizeStartCallback;
property onResizeStop
onResizeStop?: ResizeCallback;
property resizeRatio
resizeRatio?: number | [number, number];
property scale
scale?: number;
property size
size?: Size;
property snap
snap?: { x?: number[]; y?: number[];};
property snapGap
snapGap?: number;
property style
style?: React.CSSProperties;
Type Aliases
type ResizeCallback
type ResizeCallback = ( event: MouseEvent | TouchEvent, direction: Direction, elementRef: HTMLElement, delta: NumberSize) => void;
type ResizeDirection
type ResizeDirection = Direction;
type ResizeStartCallback
type ResizeStartCallback = ( e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>, dir: Direction, elementRef: HTMLElement) => void | boolean;
Namespaces
namespace global
namespace global {}
interface Window
interface Window {}
property MouseEvent
MouseEvent: typeof MouseEvent;
property TouchEvent
TouchEvent: typeof TouchEvent;
Package Files (1)
Dependencies (0)
No dependencies.
Dev Dependencies (51)
- @babel/cli
- @babel/core
- @babel/eslint-parser
- @babel/plugin-proposal-class-properties
- @babel/plugin-transform-modules-commonjs
- @babel/preset-react
- @babel/preset-typescript
- @babel/traverse
- @babel/types
- @emotion/core
- @playwright/experimental-ct-react
- @storybook/addon-info
- @storybook/addon-options
- @storybook/react
- @types/node
- @types/react
- @types/react-dom
- @types/sinon
- babel-core
- babel-loader
- babel-plugin-external-helpers
- babel-plugin-transform-class-properties
- babel-plugin-transform-object-assign
- babel-plugin-transform-object-rest-spread
- babel-polyfill
- babel-preset-env
- babel-preset-es2015
- babel-preset-flow
- babel-preset-react
- babel-register
- cross-env
- gh-pages
- npm-run-all2
- playwright-core
- prettier
- react
- react-dom
- rollup
- rollup-plugin-babel
- rollup-plugin-commonjs
- rollup-plugin-node-globals
- rollup-plugin-node-resolve
- rollup-plugin-replace
- rollup-plugin-typescript2
- rollup-watch
- sinon
- tslint
- tslint-config-google
- tslint-config-prettier
- tslint-plugin-prettier
- typescript
Peer Dependencies (2)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/re-resizable
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/re-resizable)
- HTML<a href="https://www.jsdocs.io/package/re-resizable"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 2953 ms. - Missing or incorrect documentation? Open an issue for this package.