react-rnd
- Version 10.4.14
- Published
- 86.2 kB
- 3 dependencies
- MIT license
Install
npm i react-rnd
yarn add react-rnd
pnpm add react-rnd
Overview
A draggable and resizable React Component
Index
Classes
Rnd
- componentDidMount()
- defaultProps
- draggable
- getDraggablePosition()
- getMaxSizesFromProps()
- getOffsetHeight()
- getOffsetWidth()
- getParent()
- getParentSize()
- getSelfElement()
- offsetFromParent
- onDrag()
- onDragStart()
- onDragStop()
- onResize()
- onResizeStart()
- onResizeStop()
- originalPosition
- render()
- resizable
- resizableElement
- resizingPosition
- updateOffsetFromParent()
- updatePosition()
- updateSize()
Interfaces
Props
- allowAnyClick
- bounds
- cancel
- children
- className
- default
- disableDragging
- dragAxis
- dragGrid
- dragHandleClassName
- enableResizing
- enableUserSelectHack
- lockAspectRatio
- lockAspectRatioExtraHeight
- lockAspectRatioExtraWidth
- maxHeight
- maxWidth
- minHeight
- minWidth
- onDrag
- onDragStart
- onDragStop
- onMouseDown
- onMouseUp
- onResize
- onResizeStart
- onResizeStop
- position
- resizeGrid
- resizeHandleClasses
- resizeHandleComponent
- resizeHandleStyles
- resizeHandleWrapperClass
- resizeHandleWrapperStyle
- scale
- size
- style
Type Aliases
Classes
class Rnd
class Rnd extends React.PureComponent<Props, State> {}
constructor
constructor(props: Props);
property defaultProps
static defaultProps: DefaultProps;
property draggable
draggable: Draggable;
property offsetFromParent
offsetFromParent: { left: number; top: number };
property originalPosition
originalPosition: { x: number; y: number };
property resizable
resizable: Resizable;
property resizableElement
resizableElement: { current: HTMLElement | null };
property resizingPosition
resizingPosition: { x: number; y: number };
method componentDidMount
componentDidMount: () => void;
method getDraggablePosition
getDraggablePosition: () => { x: number; y: number };
method getMaxSizesFromProps
getMaxSizesFromProps: () => MaxSize;
method getOffsetHeight
getOffsetHeight: (boundary: HTMLElement) => number;
method getOffsetWidth
getOffsetWidth: (boundary: HTMLElement) => number;
method getParent
getParent: () => any;
method getParentSize
getParentSize: () => { width: number; height: number };
method getSelfElement
getSelfElement: () => HTMLElement | null;
method onDrag
onDrag: (e: RndDragEvent, data: DraggableData) => false | void;
method onDragStart
onDragStart: (e: RndDragEvent, data: DraggableData) => void;
method onDragStop
onDragStop: (e: RndDragEvent, data: DraggableData) => false | void;
method onResize
onResize: ( e: MouseEvent | TouchEvent, direction: ResizeDirection, elementRef: HTMLElement, delta: { height: number; width: number }) => void;
method onResizeStart
onResizeStart: ( e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>, dir: ResizeDirection, elementRef: HTMLElement) => void;
method onResizeStop
onResizeStop: ( e: MouseEvent | TouchEvent, direction: ResizeDirection, elementRef: HTMLElement, delta: { height: number; width: number }) => void;
method render
render: () => React.JSX.Element;
method updateOffsetFromParent
updateOffsetFromParent: () => { top: number; left: number } | undefined;
method updatePosition
updatePosition: (position: Position) => void;
method updateSize
updateSize: (size: { width: number | string; height: number | string }) => void;
Interfaces
interface Props
interface Props {}
property allowAnyClick
allowAnyClick?: boolean;
property bounds
bounds?: string | Element;
property cancel
cancel?: string;
property children
children?: React.ReactNode;
property className
className?: string;
property default
default?: { x: number; y: number;} & Size;
property disableDragging
disableDragging?: boolean;
property dragAxis
dragAxis?: 'x' | 'y' | 'both' | 'none';
property dragGrid
dragGrid?: Grid;
property dragHandleClassName
dragHandleClassName?: string;
property enableResizing
enableResizing?: ResizeEnable;
property enableUserSelectHack
enableUserSelectHack?: boolean;
property lockAspectRatio
lockAspectRatio?: boolean | number;
property lockAspectRatioExtraHeight
lockAspectRatioExtraHeight?: number;
property lockAspectRatioExtraWidth
lockAspectRatioExtraWidth?: number;
property maxHeight
maxHeight?: number | string;
property maxWidth
maxWidth?: number | string;
property minHeight
minHeight?: number | string;
property minWidth
minWidth?: number | string;
property onDrag
onDrag?: RndDragCallback;
property onDragStart
onDragStart?: RndDragCallback;
property onDragStop
onDragStop?: RndDragCallback;
property onMouseDown
onMouseDown?: (e: MouseEvent) => void;
property onMouseUp
onMouseUp?: (e: MouseEvent) => void;
property onResize
onResize?: RndResizeCallback;
property onResizeStart
onResizeStart?: RndResizeStartCallback;
property onResizeStop
onResizeStop?: RndResizeCallback;
property position
position?: { x: number; y: number;};
property resizeGrid
resizeGrid?: Grid;
property resizeHandleClasses
resizeHandleClasses?: HandleClasses;
property resizeHandleComponent
resizeHandleComponent?: HandleComponent;
property resizeHandleStyles
resizeHandleStyles?: HandleStyles;
property resizeHandleWrapperClass
resizeHandleWrapperClass?: string;
property resizeHandleWrapperStyle
resizeHandleWrapperStyle?: React.CSSProperties;
property scale
scale?: number;
property size
size?: Size;
property style
style?: React.CSSProperties;
index signature
[key: string]: any;
Type Aliases
type DraggableData
type DraggableData = { node: HTMLElement; deltaX: number; deltaY: number; lastX: number; lastY: number;} & Position;
type Grid
type Grid = [number, number];
type HandleClasses
type HandleClasses = { bottom?: string; bottomLeft?: string; bottomRight?: string; left?: string; right?: string; top?: string; topLeft?: string; topRight?: string;};
type HandleComponent
type HandleComponent = { top?: React.ReactElement<any>; right?: React.ReactElement<any>; bottom?: React.ReactElement<any>; left?: React.ReactElement<any>; topRight?: React.ReactElement<any>; bottomRight?: React.ReactElement<any>; bottomLeft?: React.ReactElement<any>; topLeft?: React.ReactElement<any>;};
type HandleStyles
type HandleStyles = { bottom?: React.CSSProperties; bottomLeft?: React.CSSProperties; bottomRight?: React.CSSProperties; left?: React.CSSProperties; right?: React.CSSProperties; top?: React.CSSProperties; topLeft?: React.CSSProperties; topRight?: React.CSSProperties;};
type Position
type Position = { x: number; y: number;};
type ResizableDelta
type ResizableDelta = { width: number; height: number;};
type ResizeEnable
type ResizeEnable = | { bottom?: boolean; bottomLeft?: boolean; bottomRight?: boolean; left?: boolean; right?: boolean; top?: boolean; topLeft?: boolean; topRight?: boolean; } | boolean;
type RndDragCallback
type RndDragCallback = DraggableEventHandler;
type RndDragEvent
type RndDragEvent = | React.MouseEvent<HTMLElement | SVGElement> | React.TouchEvent<HTMLElement | SVGElement> | MouseEvent | TouchEvent;
type RndResizeCallback
type RndResizeCallback = ( e: MouseEvent | TouchEvent, dir: ResizeDirection, elementRef: HTMLElement, delta: ResizableDelta, position: Position) => void;
type RndResizeStartCallback
type RndResizeStartCallback = ( e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>, dir: ResizeDirection, elementRef: HTMLElement) => void | boolean;
Package Files (1)
Dependencies (3)
Dev Dependencies (50)
- @babel/cli
- @babel/core
- @babel/plugin-proposal-class-properties
- @babel/plugin-transform-modules-commonjs
- @babel/preset-react
- @babel/preset-typescript
- @babel/traverse
- @babel/types
- @emotion/core
- @rollup/plugin-babel
- @rollup/plugin-node-resolve
- @storybook/addon-actions
- @storybook/addon-info
- @storybook/addon-links
- @storybook/addon-options
- @storybook/react
- @types/enzyme
- @types/enzyme-adapter-react-16
- @types/node
- @types/react
- @types/react-dom
- @types/sinon
- @types/storybook__addon-actions
- @types/storybook__react
- babel-core
- babel-eslint
- babel-loader
- cpy-cli
- cross-env
- enzyme
- enzyme-adapter-react-16
- gh-pages
- light-ts-loader
- npm-run-all2
- prettier
- react
- react-dom
- react-test-renderer
- rollup
- rollup-plugin-commonjs
- rollup-plugin-node-globals
- rollup-plugin-replace
- rollup-plugin-typescript2
- rollup-watch
- sinon
- tslint
- tslint-eslint-rules
- tslint-plugin-prettier
- tslint-react
- 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/react-rnd
.
- Markdown[](https://www.jsdocs.io/package/react-rnd)
- HTML<a href="https://www.jsdocs.io/package/react-rnd"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 4073 ms. - Missing or incorrect documentation? Open an issue for this package.