A resizable and draggable component for React.
https://codesandbox.io/s/xpm699v4lp
CodeSandbox(with
default)
CodeSandbox(with size and
position)
CodeSandbox(with
typescript)
npm i -S react-rnd
yarn add react-rnd
default
<Rnd
default={{
x: 0,
y: 0,
width: 320,
height: 200,
}}>
Rnd</Rnd>
position
and size
<Rnd
={{ width: this.state.width, height: this.state.height }}
size={{ x: this.state.x, y: this.state.y }}
position={(e, d) => { this.setState({ x: d.x, y: d.y }) }}
onDragStop={(e, direction, ref, delta, position) => {
onResizeStopthis.setState({
width: ref.style.width,
height: ref.style.height,
...position,
;
})
}}>
001
</Rnd>
default: { x: number; y: number; width?: number | string; height?: number | string; };
The width
and height
property is used to
set the default size of the component. For example, you can set
300
, '300px'
, 50%
. If omitted,
set 'auto'
.
The x
and y
property is used to set the
default position of the component.
size?: { width: (number | string), height: (number | string) };
The size
property is used to set size of the component.
For example, you can set 300, ‘300px’, 50%.
Use size
if you need to control size state by
yourself.
position?: { x: number, y: number };
The position
property is used to set position of the
component. Use position
if you need to control size state
by yourself.
see, following example.
<Rnd
={{ width: this.state.width, height: this.state.height }}
size={{ x: this.state.x, y: this.state.y }}
position={(e, d) => { this.setState({ x: d.x, y: d.y }) }}
onDragStop={(e, direction, ref, delta, position) => {
onResizethis.setState({
width: ref.offsetWidth,
height: ref.offsetHeight,
...position,
;
})
}}>
001
</Rnd>
className?: string;
The className
property is used to set the custom
className
of the component.
style?: { [key: string]: string };
The style
property is used to set the custom
style
of the component.
minWidth?: number | string;
The minWidth
property is used to set the minimum width
of the component. For example, you can set 300
,
'300px'
, 50%
.
minHeight?: number | string;
The minHeight
property is used to set the minimum height
of the component. For example, you can set 300
,
'300px'
, 50%
.
maxWidth?: number | string;
The maxWidth
property is used to set the maximum width
of the component. For example, you can set 300
,
'300px'
, 50%
.
maxHeight?: number | string
;The maxHeight
property is used to set the maximum height
of the component. For example, you can set 300
,
'300px'
, 50%
.
resizeGrid?: [number, number];
The resizeGrid
property is used to specify the
increments that resizing should snap to. Defaults to
[1, 1]
.
dragGrid?: [number, number];
The dragGrid
property is used to specify the increments
that moving should snap to. Defaults to [1, 1]
.
lockAspectRatio?: boolean | number;
The lockAspectRatio
property is used to lock aspect
ratio. Set to true
to lock the aspect ratio based on the
initial size. Set to a numeric value to lock a specific aspect ratio
(such as 16/9
). If set to numeric, make sure to set initial
height/width to values with correct aspect ratio. If omitted, set
false
.
lockAspectRatioExtraWidth?: number;
The lockAspectRatioExtraWidth
property enables a
resizable component to maintain an aspect ratio plus extra width. For
instance, a video could be displayed 16:9 with a 50px side bar. If
omitted, set 0
.
scale?: number;
Specifies the scale of the canvas you are dragging or resizing this
element on. This allows you to, for example, get the correct drag /
resize deltas while you are zoomed in or out via a transform or matrix
in the parent of this element. If omitted, set 1
.
lockAspectRatioExtraHeight?: number;
The lockAspectRatioExtraHeight
property enables a
resizable component to maintain an aspect ratio plus extra height. For
instance, a video could be displayed 16:9 with a 50px header bar. If
omitted, set 0
.
dragHandleClassName?: string;
Specifies a selector to be used as the handle that initiates drag.
Example: handle
.
resizeHandleStyles?: HandleStyles;
The resizeHandleStyles
property is used to override the
style of one or more resize handles. Only the axis you specify will have
its handle style replaced. If you specify a value for right
it will completely replace the styles for the right
resize
handle, but other handle will still use the default styles.
export type HandleStyles = {
?: React.CSSProperties,
bottom?: React.CSSProperties,
bottomLeft?: React.CSSProperties,
bottomRight?: React.CSSProperties,
left?: React.CSSProperties,
right?: React.CSSProperties,
top?: React.CSSProperties,
topLeft?: React.CSSProperties
topRight }
resizeHandleClasses?: HandleClasses;
The resizeHandleClasses
property is used to set the
className of one or more resize handles.
= {
type HandleClasses ?: string;
bottom?: string;
bottomLeft?: string;
bottomRight?: string;
left?: string;
right?: string;
top?: string;
topLeft?: string;
topRight }
resizeHandleComponent?
:
HandleCompoent;`The resizeHandleComponent
allows you to pass a custom
React component as the resize handle.
= {
type HandleComponent ?: React.ReactElement<any>;
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 }
resizeHandleWrapperClass?: string;
The resizeHandleWrapperClass
property is used to set css
class name of resize handle wrapper(span
) element.
resizeHandleWrapperStyle?: Style;
The resizeHandleWrapperStyle
property is used to set css
class name of resize handle wrapper(span
) element.
enableResizing?: ?Enable;
The enableResizing
property is used to set the resizable
permission of the component.
The permission of top
, right
,
bottom
, left
, topRight
,
bottomRight
, bottomLeft
, topLeft
direction resizing. If omitted, all resizer are enabled. If you want to
permit only right direction resizing, set
{ top:false, right:true, bottom:false, left:false, topRight:false, bottomRight:false, bottomLeft:false, topLeft:false }
.
export type Enable = {
?: boolean;
bottom?: boolean;
bottomLeft?: boolean;
bottomRight?: boolean;
left?: boolean;
right?: boolean;
top?: boolean;
topLeft?: boolean;
topRight| boolean }
disableDragging?: boolean;
The disableDragging
property disables dragging
completely.
cancel?: string;
The cancel
property disables specifies a selector to be
used to prevent drag initialization (e.g. .body
).
dragAxis?: 'x' | 'y' | 'both' | 'none'
The direction of allowed movement (dragging) allowed (‘x’,‘y’,‘both’,‘none’).
bounds?: string;
Specifies movement boundaries. Accepted values: - parent
restricts movement within the node’s offsetParent (nearest node with
position relative or absolute) - window
, body
,
or - Selector, like .fooClassName
.
enableUserSelectHack?: boolean;
By default, we add ‘user-select:none’ attributes to the document
body
to prevent ugly text selection during drag. If this is causing
problems
for your app, set this to false
.
scale?: number;
Specifies the scale of the canvas your are resizing and dragging this
element on. This allows you to, for example, get the correct resize and
drag deltas while you are zoomed in or out via a transform or matrix in
the parent of this element. If omitted, set 1
.
onResizeStart?: RndResizeStartCallback;
RndResizeStartCallback
type is below.
export type RndResizeStartCallback = (
: SyntheticMouseEvent<HTMLDivElement> | SyntheticTouchEvent<HTMLDivElement>,
e: ResizeDirection,
dir: React.ElementRef<'div'>,
refToElement=> void; )
Calls when resizable component resize start.
onResize?: RndResizeCallback;
RndResizeCallback
type is below.
export type RndResizeCallback = (
: MouseEvent | TouchEvent,
e: ResizeDirection,
dir: React.ElementRef<'div'>,
refToElement: ResizableDelta,
delta: Position,
position=> void; )
Calls when resizable component resizing.
onResizeStop?: RndResizeCallback;
RndResizeCallback
type is below.
export type RndResizeCallback = (
: MouseEvent | TouchEvent,
e: ResizeDirection,
dir: React.ElementRef<'div'>,
refToElement: ResizableDelta,
delta: Position,
position=> void; )
Calls when resizable component resize stop.
onDragStart: DraggableEventHandler;
Callback called on dragging start.
= {
type DraggableData node: HTMLElement,
x: number,
y: number,
deltaX: number, deltaY: number,
lastX: number, lastY: number
;
}
= (
type DraggableEventHandler : SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
e=> void | false; )
onDrag: DraggableEventHandler;
onDrag
called with the following parameters:
= {
type DraggableData node: HTMLElement,
x: number,
y: number,
deltaX: number, deltaY: number,
lastX: number, lastY: number
;
}
= (
type DraggableEventHandler : SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
e=> void | false; )
onDragStop: DraggableEventHandler;
onDragStop
called on dragging stop.
= {
type DraggableData node: HTMLElement,
x: number,
y: number,
deltaX: number, deltaY: number,
lastX: number, lastY: number
;
}
= (
type DraggableEventHandler : SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
e=> void | false; )
updateSize(size: { width: string | number, height: string | number })
Update component size. For example, you can set 300
,
'300px'
, 50%
.
class YourComponent extends Component {
...
update() {
this.rnd.updateSize({ width: 200, height: 300 });
}
render() {
return (
<Rnd ref={c => { this.rnd = c; }} ...rest >
example</Rnd>
;
)
}...
}
updatePosition({ x: number, y: number }): void
Update component position. grid
bounds
props is ignored, when this method called.
class YourComponent extends Component {
...
update() {
this.rnd.updatePosition({ x: 200, y: 300 });
}
render() {
return (
<Rnd ref={c => { this.rnd = c; }} ...rest >
example</Rnd>
;
)
}
...
}
allowAnyClick?: boolean
If set to true
, will allow dragging on non left-button
clicks.
npm t
If you have a feature request, please add it as an issue or make a pull request.
If you have a bug to report, please reproduce the bug in CodeSandbox to help us easily isolate it.
re-resizable
to 6.9.2
react-draggable
to v4.4.4re-resizable
to 6.9.1
px
,
reize dowes not work. #739react-draggable
to v4.4.3allowAnyClick
props.nodeRef
props.react-draggable
to v4.2.0 #690react-draggable
to v4.3.1re-resizable
to v6.3.2onMouseUp
callback.React.pureComponent
re-resizablev5
scale
props to index.js.flow.scale
props. #482default export
to export
#405bounds
is ignored when lock aspect
ratio set.body
to bounds props.window
. you can check here.<Rnd onMouseDown={...} />
dragHandleClassName
automatically, Please pass string (i.e handle
.extendsProps
. Please add extends
props directly. i.e) <Rnd data-foo="42" />
z
props. Please add
zIndex
via style
props. i.e)
<Rnd style={{ zIndex: 9 }} />
re-resizable
to fix percentage size and
bare behavior.typescript
instead of
flowype
.<div />
, isMounted
state and setParentPosition()
.props,children
to dummy
<div>
to render children in first.fix: isMounted
and
(!this.state.isMounted) return <div />
line #356
enableUserSelectHack?: boolean;
.extendProps
is not passed correctly.bounds
is not work correctly. (#162)size
.position
.default
instead of x
, y
,
width
, height
.resizeHandleWrapperClass
and
resizeHandleWrapperStyle
.default
and add x
,
y
, width
, height
.dragHandlersXXXX
and
resizeHandlersXXXX
props to dragHandleXXXX
and
resizeHandleXXXX
.normal
to cursor style when
dragHandlerClassName
is not empty.relative
when component will update.top: 0
, left: 0
.relative
when parent position equals
static
.react-draggable v3
,
flow-bin v0.53
, and other…)z
props is not applied to state.extendsProps
. #129disableDragging
props.updateZIndex
.updateSize
.react-draggable
.updateZIndex
, method to updated component
zIndex
state.react-rnd
.canUpdatePositionByParent
property.canUpdateSizeByParent
property.initiAsResizing
property.x
, y
, width
and
height
property to initial
.updateSize
, updatePosition
, method to
updated conponent state.lockAspectRatio
property to lock aspect ratio when
resizing.canUpdatePositionByParent
property.grid
props to snap grid. (thanks @paulyoung)canUpdateSizeByParent
props #38require
The MIT License (MIT)
Copyright (c) 2018 bokuweb
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.