🖱 A resizable and draggable component for React.

Last update: Jul 31, 2022

A resizable and draggable component for React.

Build Status Build Status

Table of Contents

Screenshot

https://codesandbox.io/s/xpm699v4lp

Live Demo

Storybook

Storybook

CodeSandbox

Edit y3997qply9
CodeSandbox(with default)
CodeSandbox(with size and position)
CodeSandbox(with typescript)

Install

  • use npm
npm i -S react-rnd
  • use yarn
yarn add react-rnd

Usage

Example with default

<Rnd
  default={{
    x: 0,
    y: 0,
    width: 320,
    height: 200,
  }}
>
  Rnd
</Rnd>

Example with position and size

<Rnd
  size={{ width: this.state.width,  height: this.state.height }}
  position={{ x: this.state.x, y: this.state.y }}
  onDragStop={(e, d) => { this.setState({ x: d.x, y: d.y }) }}
  onResizeStop={(e, direction, ref, delta, position) => {
    this.setState({
      width: ref.style.width,
      height: ref.style.height,
      ...position,
    });
  }}
>
  001
</Rnd>

Props

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
  size={{ width: this.state.width,  height: this.state.height }}
  position={{ x: this.state.x, y: this.state.y }}
  onDragStop={(e, d) => { this.setState({ x: d.x, y: d.y }) }}
  onResize={(e, direction, ref, delta, position) => {
    this.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 your 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 = {
  bottom?: React.CSSProperties,
  bottomLeft?: React.CSSProperties,
  bottomRight?: React.CSSProperties,
  left?: React.CSSProperties,
  right?: React.CSSProperties,
  top?: React.CSSProperties,
  topLeft?: React.CSSProperties,
  topRight?: React.CSSProperties
}

resizeHandleClasses?: HandleClasses;

The resizeHandleClasses property is used to set the className of one or more resize handles.

type HandleClasses = {
  bottom?: string;
  bottomLeft?: string;
  bottomRight?: string;
  left?: string;
  right?: string;
  top?: string;
  topLeft?: string;
  topRight?: string;
}

resizeHandleComponent?: HandleCompoent;`

The resizeHandleComponent allows you to pass a custom React component as the resize handle.

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>;
}

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 = {
  bottom?: boolean;
  bottomLeft?: boolean;
  bottomRight?: boolean;
  left?: boolean;
  right?: boolean;
  top?: boolean;
  topLeft?: boolean;
  topRight?: boolean;
} | 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.

Callback

onResizeStart?: RndResizeStartCallback;

RndResizeStartCallback type is below.

export type RndResizeStartCallback = (
  e: SyntheticMouseEvent<HTMLDivElement> | SyntheticTouchEvent<HTMLDivElement>,
  dir: ResizeDirection,
  refToElement: React.ElementRef<'div'>,
) => void;

Calls when resizable component resize start.

onResize?: RndResizeCallback;

RndResizeCallback type is below.

export type RndResizeCallback = (
  e: MouseEvent | TouchEvent,
  dir: ResizeDirection,
  refToElement: React.ElementRef<'div'>,
  delta: ResizableDelta,
  position: Position,
) => void;

Calls when resizable component resizing.

onResizeStop?: RndResizeCallback;

RndResizeCallback type is below.

export type RndResizeCallback = (
  e: MouseEvent | TouchEvent,
  dir: ResizeDirection,
  refToElement: React.ElementRef<'div'>,
  delta: ResizableDelta,
  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 = (
  e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
) => 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 = (
  e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
) => 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 = (
  e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
) => void | false;

Instance API

updateSize(size: { width: string | number, height: string | number })

Update component size. For example, you can set 300, '300px', 50%.

  • for example
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.

  • for example
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.

Test

npm t

Contribute

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.

Changelog

v10.2.3

  • Fixed a bug, if set minWidth or minHeight with px, reize dowes not work. #739

v10.2.0

  • Upgrade react-draggable to v4.4.3
  • Add allowAnyClick props.
  • Add nodeRef props.

v10.1.10

  • Downgrade react-draggable to v4.2.0 #690

v10.1.9

  • Update react-draggable to v4.3.1

v10.1.8

  • Update re-resizable to v6.3.2

v10.1.7

  • A minor fix for a bug with forwarding of cancelling indication of an onDrag event. (#667)

v10.1.6

  • Fixes #641 without causing other issues with typing.

v10.1.5

  • Fixed a bug, react-draggable not bundling with rollup #641

v10.1.4

  • Fixed a bug, box moves when resized #622

v10.1.3

  • Fixed a bug, position is wrong when onResize #618

v10.1.2

  • Upgrade re-resizable to 6.1.1
  • Upgrade react-draggable to 4.1.0

v10.1.1

  • Upgrade re-resizable to 6.1.0

v10.1.0

  • Implement resizeHandleComponent #591
  • Update dependency react-draggable to v4

v10.0.0

  • Fix: Fix #526
  • Feat: Add onMouseUp callback.
  • Feat: Use React.pureComponent

v9.2.0

  • Chore: Use re-resizablev5

v9.1.2

  • Fix: Fixes memory leak #499

v9.1.1

  • Fix: Add scale props to index.js.flow.

v9.1.0

  • Feat: Add scale props. #482
  • Feat: Upgrade deps.

v9.0.4

  • Fix: cursor style #469

v9.0.3

  • update dependency re-resizable to v4.9.3 #444

v9.0.2

  • fix: resizeHandleWrapperClass warning shown in console #428

v9.0.1

  • fix: Allow additional props in typescript.

v9.0.0

  • fix: change default export to export #405

v8.0.2

  • fix: fixed a bug, bounds is ignored when lock aspect ratio set.
  • feat: add body to bounds props.

v8.0.1

  • fix: [#221] fixed a bug, maxwidth / height not applied.

v8.0.0

  • fix: fixed some position and resizing bug.
  • fix: [#209] bounds window. you can check here.
  • fix: [#317] add onMouseDown. i.e) <Rnd onMouseDown={...} />
  • [BREAKING] fix: [#335] add . to dragHandleClassName automatically, Please pass string (i.e handle.
  • [BREAKING] fix: remove extendsProps. Please add extends props directly. i.e) <Rnd data-foo="42" />
  • [BREAKING] fix: remove z props. Please add zIndex via style props. i.e) <Rnd style={{ zIndex: 9 }} />

v8.0.0-beta.2

  • fix: Upgrade re-resizable to fix percentage size and bare behavior.

v8.0.0-beta.1

  • fix: Fixed a bug, controlled position does not work correctly.
  • feat: Use typescript instead of flowype.

v8.0.0-beta.0

  • fix: Remove dummy <div />, isMounted state and setParentPosition().

v7.4.3

  • fix: Add props,children to dummy <div> to render children in first.

v7.4.2 (unpublished)

fix: isMounted and (!this.state.isMounted) return <div /> line #356

v7.4.1

  • fix: Fixed Array.from error in IE11

v7.4.0

  • fix: add enableUserSelectHack?: boolean;.

v7.3.1

  • chore(deps): upgrade deps
  • chore(deps): upgrade lint and remove unused state
  • chore(deps): install prettier

v7.3.0

  • chore(deps): upgrade re-resizable

v7.2.0

  • Support for cancel feature of react-draggable #206

v7.1.5

  • Fixed a issue #199 Add enableUserSelectHack props to react-draggable

v7.1.4

  • Fixed a issue #188 maxWidth and maxHeight props don't respect after resize

v7.1.3

  • Fixed a bug, extendProps is not passed correctly.
  • Fixed a bug, bounds is not work correctly. (#162)

v7.1.1 / v7.1.2

  • Add internal props.

v7.1.0

  • Add size.
  • Add position.

v7.0.0

  • Add default instead of x, y, width, height.
  • Add resizeHandleWrapperClass and resizeHandleWrapperStyle.

v6.0.1

  • Remove unnecessary types.

v6.0.0

  • Use rollup.
  • Support % min/max size.
  • Change props, remove default and add x, y, width, height.
  • Rename dragHandlersXXXX and resizeHandlersXXXX props to dragHandleXXXX and resizeHandleXXXX.

v5.1.3

  • Fix cursor style, set normal to cursor style when dragHandlerClassName is not empty.

v5.1.2

  • Add position relative when component will update.

v5.1.1

  • Add top: 0, left: 0.
  • Add position relative when parent position equals static.

v5.1.0

  • Update dependencies(react-draggable v3, flow-bin v0.53, and other...)

v5.0.9

  • Fix bug new z props is not applied to state.

v5.0.8

  • Add extendsProps. #129

v5.0.7

  • Add disableDragging props.

v5.0.6

  • Fix flow error.

v5.0.5

  • Add index.js.flow

v5.0.4

  • Fix Issue #117.

v5.0.3

  • Fix updateZIndex.
  • Fix updateSize.
  • Fix left and top bounds.

v5.0.2

  • Fix argument events #100

v5.0.1

  • Fix example
  • Update README

v5.0.0

  • Fix resize bounds.
  • Modify API.
  • Use original react-draggable.

v4.2.1

  • Added updateZIndex, method to updated component zIndex state.

v4.2.0

  • Pass the new position in the onResizeStop callback #60

v4.1.0

  • Pass the new position along in the resize callback #55

v4.0.1

  • Fix style props to applt zIndex chaned.

v4.0.0

  • Rename react-rnd.
  • Remove canUpdatePositionByParent property.
  • Remove canUpdateSizeByParent property.
  • Remove initiAsResizing property.
  • Change x, y, width and height property to initial.
  • Add updateSize, updatePosition, method to updated conponent state.
  • Add lockAspectRatio property to lock aspect ratio when resizing.

v3.0.0

  • Add canUpdatePositionByParent property.

v2.0.0

  • Fix bug, resize and grid not work properly.

v1.2.0

  • Add grid props to snap grid. (thanks @paulyoung)
  • Fix bug, moveAxis not work properly.

v1.1.3

  • Fix situations when on dragStop you wanted to revert to 0,0 position #39
  • Add canUpdateSizeByParent props #38

v1.1.2

  • Add object.assign transform

v1.1.0

  • Add add module exports plugin for require

v1.0.1

  • Bug fix

v1.0.0

  • Support react v15.x
  • Support left, top resizer
  • Remove start props, use width, height, x, and y.

v0.5.3

  • Add handle selector

License

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.

GitHub

https://github.com/bokuweb/react-resizable-and-movable
Comments
  • 1. Is it necessary to set the parent elements position?

    https://github.com/bokuweb/react-rnd/blob/9862fdfa63f2adb3f0b54aa88a544ee63af50d8c/src/index.js#L235

    Why is this needed?

    In general I would say it's bad practice to alter code that you do not control as it could have unwanted side effects and it can be hard to debug.

    Reviewed by Stianhn at 2018-06-20 08:09
  • 2. Update sinon to the latest version 🚀

    Version 4.0.0 of sinon just got published.

    Dependency sinon
    Current Version 3.3.0
    Type devDependency

    The version 4.0.0 is not covered by your current version range.

    Without accepting this pull request your project will work just like it did before. There might be a bunch of new features, fixes and perf improvements that the maintainers worked on for you though.

    I recommend you look into these changes and try to get onto the latest version of sinon. Given that you have a decent test suite, a passing build is a strong indicator that you can take advantage of these changes by merging the proposed change into your project. Otherwise this branch is a great starting point for you to work on the update.


    Commits

    The new version differs by 11 commits.

    • 95908f4 Add release notes for 4.0.0
    • 460907b Update docs/changelog.md and set new release id in docs/_config.yml
    • 6f599a6 Add release documentation for v4.0.0
    • fba2e29 4.0.0
    • c838e22 Update History.md and AUTHORS for new release
    • 3837635 Merge pull request #1569 from fatso83/1566-update-deps
    • 3d3a044 Explicitly update fake xhr lib 'nise'
    • 5ec0ae0 Merge pull request #1564 from fatso83/amended-1563
    • cf32e6d Update deps lock file
    • 37ff38b Removes dependency to "build"
    • 34fc2ba Remove support for stubbing undefined props (#1557)

    See the full diff

    Not sure how things should work exactly?

    There is a collection of frequently asked questions and of course you may always ask my humans.


    Your Greenkeeper Bot :palm_tree:

    Reviewed by greenkeeper[bot] at 2017-09-26 09:58
  • 3. Update react-styleguidist to the latest version 🚀

    Version 6.0.0 of react-styleguidist just got published.

    Dependency react-styleguidist
    Current Version 5.5.10
    Type devDependency

    The version 6.0.0 is not covered by your current version range.

    Without accepting this pull request your project will work just like it did before. There might be a bunch of new features, fixes and perf improvements that the maintainers worked on for you though.

    I recommend you look into these changes and try to get onto the latest version of react-styleguidist. Given that you have a decent test suite, a passing build is a strong indicator that you can take advantage of these changes by merging the proposed change into your project. Otherwise this branch is a great starting point for you to work on the update.


    Release Notes v6.0.0

    Breaking changes

    Changed fenced code blocks handling in Markdown

    Any code block with a language tag of js, jsx or javascript will be rendered as a React component with a interactive playground.

    React component example:
    
    &lt;Button size="large"&gt;Push Me&lt;/Button&gt;
    

    You can disable an editor by passing a 'noeditor' modifier:

    &lt;Button&gt;Push Me&lt;/Button&gt;
    

    You can disable a playground by passing a 'static' modifier:

    import React from 'react';
    

    Examples with all other languages are rendered only as highlighted source code, not an actual component:

    &lt;Button size="large"&gt;Push Me&lt;/Button&gt;
    

    Fenced code blocks without a language or indented code blocks are rendered as before: with an interactive playground.

    A custom example language for fenced code blocks was removed.

    You can customize this behavior with the new updateExample config option. For example you can use it to load examples from files:

    module.exports = {
      updateExample: function(props) {
        const { settings, lang } = props;
        if (typeof settings.file === 'string') {
          const filepath = settings.file;
          delete settings.file;
          return {
            content: fs.readFileSync(filepath),
            settings,
            lang,
          }
        }
        return props;
      }
    };

    Use it like this in you Markdown files:

    ```js { "file": "./some/file.js" }
    ```
    

    Remove webpack 1 support

    Webpack 2+ is required now.

    How to migrate

    1. Add a static modifier to all fenced code block with a language tag of js, jsx or javascript:

      ```js → ```js static

    2. (Recommended) Replace any fenced code blocks that have example language with fenced code blocks with a language tag of js, jsx or javascript:

      ```example → ```js

    3. (Recommended) Replace indented code blocks with fenced code blocks with a language tag of js, jsx or javascript:

       5.x:
      
       &lt;Button size="large"&gt;Push Me&lt;/Button&gt;
      

      6.x:

      &lt;Button size="large"&gt;Push Me&lt;/Button&gt;
      

    Commits

    The new version differs by 33 commits.

    • 1f6e5e4 v6.0.0
    • ff3bd08 Refactor: Remove unnecessary webpack options
    • 0b752e5 Fix: Remove OccurrenceOrderPlugin
    • 782ba3a Fix: Use uglifyjs-webpack-plugin
    • a7068f7 Chore: Update React
    • 826bcdb Chore: Update linters
    • c32c1bc Chore: Update deps
    • 3ba52f3 Chore: Update deps
    • eb216f6 Merge branch 'six'
    • d7a0da1 Docs: Spell check
    • 1915862 Docs: Use “interactive playground” everywhere.
    • 88724cd Docs: Update examples syntax
    • c944683 Docs: Few small tweaks
    • 5eeffe4 Chore: loaders → rules for webpack 2
    • c39ba15 Docs: Fix customized example

    There are 33 commits in total.

    See the full diff

    Not sure how things should work exactly?

    There is a collection of frequently asked questions and of course you may always ask my humans.


    Your Greenkeeper Bot :palm_tree:

    Reviewed by greenkeeper[bot] at 2017-07-31 15:01
  • 4. Update flow-bin to the latest version 🚀

    Version 0.55.0 of flow-bin just got published.

    Dependency flow-bin
    Current Version 0.54.1
    Type devDependency

    The version 0.55.0 is not covered by your current version range.

    Without accepting this pull request your project will work just like it did before. There might be a bunch of new features, fixes and perf improvements that the maintainers worked on for you though.

    I recommend you look into these changes and try to get onto the latest version of flow-bin. Given that you have a decent test suite, a passing build is a strong indicator that you can take advantage of these changes by merging the proposed change into your project. Otherwise this branch is a great starting point for you to work on the update.


    Commits

    The new version differs by 1 commits.

    See the full diff

    Not sure how things should work exactly?

    There is a collection of frequently asked questions and of course you may always ask my humans.


    Your Greenkeeper Bot :palm_tree:

    Reviewed by greenkeeper[bot] at 2017-09-20 20:24
  • 5. Bounds checking bugs

    Overview of the problem

    I'm finding several bugs related to bounds checking.

    1. When bounds="window", attempts to drag the Rnd cause it to move to top left of window. You can resize it without it moving, but when you then try to drag, it moves. See it here: https://www.webpackbin.com/bins/-L-ZFjL6mq72pTvbHIHU

    2. When lockAspectRatio is set and bounds="parent", it is possible to resize the Rnd outside of the lower bounds. First move the Rnd to the bottom of the window, then resize it from the left or right edge. The bottom will grow past the bottom edge of the window. Additional resizes from other edges/corners keep the Rnd in the same position. But clicking it to drag causes it move so the entire Rnd is within the bounds. See it here: https://www.webpackbin.com/bins/-L-ZHTV_IdyFrlUr-jip

    3. My understanding is the bound can take a selector. However bounds="body" doesn't seem to work as expected.

    Reviewed by tauren at 2017-12-05 01:36
  • 6. Rotated RND resizing problem

    QUESTION I am finding it difficult to resize a RND that is rotated by xdeg around the Z axis. Is resizeHandlerStyles prop a solution? Or is it not supported by the component altogether?

    Thanks

    I'm using react-rnd 5.0.8

    Steps to Reproduce

    1. Rotate an RND by 90deg transform: rotateZ(90deg)
    2. Resize using the right handler

    Expected behavior

    Should increase/decrease the width of the RND along X direction

    Actual behavior

    Scales the image / does some unexpected resize Handler style also looks wrong

    Reviewed by nandukalidindi at 2017-07-12 16:10
  • 7. Parent padding problem

    Using bounds = 'parent' and setting both padding-left and padding-right on the parent makes the right drag limit wrong (it looks like its padding-left + padding-right). Reproducing the bug on the demo is easy, just open the dev tools and set the padding (left and right) to 100px.

    Setting only the left padding 'works' (in this case, the right padding could not be set and is the same as left...).

    The same thing happens on padding-top and padding-bottom.

    Maybe I missed something ?

    Reviewed by Nauss at 2017-01-12 16:46
  • 8. Resizing does not lock moving

    Great component thanks! However, when i place in in my app, every time I resize the box moves too. This does not happen in you demo. Any ideas why? Also, is there a way to stop the resize arrow from appearing on the y axis? Thanks!

    Reviewed by bdyetton at 2016-02-06 21:39
  • 9. Fix dragging and resizing on mobile

    Proposed solution

    Fix for #725, nodeRef was preventing dragging on mobile. This PR also removes references to nodeRef that I forgot to remove last time in the type definition for the <RND /> props and in the render() function.

    This PR also contains a fix to resizing on mobile that existed before we added nodeRef. When testing this on mobile, I noticed that resizing did not behave as expected. While resizing, the position of the box would also shift the position box around.

    See #725 for more info on that bug and how this PR fixes it.

    Testing Done

    I tested this in Chrome, Safari, Firefox, iOS Safari and Android Chrome. Dragging and resizing both worked in all of them, and all tests passed.

    Reviewed by chrisstiles at 2020-08-09 01:40
  • 10. dragStop img tag need click mouse?

    is it a bug of react rnd?

    i use react-rnd with the 7.3.0 version

    my browser is chrome 64.0.3282.167.

    Description

    i use img tag in Rnd, when i drop img, i need to click mouse to drop the img, my code is:

     <Rnd ref={id => { this.rnd = id; }} 
         default={{ x, y, width, height }}
         minWidth={minWidth} minHeight={minHeight}
         maxWidth={maxWidth} maxHeight={maxHeight}
         size={{ width: width,  height: height }}
         bounds='parent'
         enableResizing={{top:false, right:true, bottom:true, left:false,
           topRight:false, bottomRight:true, bottomLeft:false, topLeft:false}}
        onDragStop={handleDragStop} 
        onResizeStop={handleResizeStop}>
          <img src={'1.png'} width={'100%'} alt='' height={'100%'}  />
    </Rnd>
    

    and i found react-rnd need react-draggable dependencies, and the react-draggable open an issue : https://github.com/mzabriskie/react-draggable/issues/304, this problem is due to it?

    Expected behavior

    if i release the mouse, the img tag need to be in the mouse position.

    Actual behavior

    when i release the mouse, i need to click mouse to confirm the position of img tag.

    would you give me help? thanks~ @bokuweb

    Reviewed by lucky-newbie at 2018-02-28 10:15
  • 11. Update rollup to the latest version 🚀

    Version 0.51.0 of rollup was just published.

    Dependency rollup
    Current Version 0.50.1
    Type devDependency

    The version 0.51.0 is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    It might be worth looking into these changes and trying to get this project onto the latest version of rollup.

    If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.


    Commits

    The new version differs by 78 commits.

    • 37b876a 0.51.0
    • 70ad6ed Merge pull request #1667 from lukastaegert/simple-object-shape-tracking
    • bc70d8d Resolve #1263
    • 00a5b9c * Rename StructuredAssignmentTracker -> ObjectShapeTracker
    • ba7f8b2 Assume that accessing members of a pure global function or its prototype
    • 75f36d1 Remove parameter binding logic as it has abysmal performance in its
    • eb1c581 Simplify tracked assignments when something unknown is assigned.
    • 5132d3b * Fix some missing options
    • 52f4684 * Add ExecutionPathOptions to all bind calls
    • e2daaec Support getter return values and setter parameters.
    • dcfe5d4 Bind return values.
    • 63e4453 Bind calls to ES6 constructors
    • 503b8aa Bind calls to ES5 constructors
    • 2fb0c34 Bind calls to object expression members
    • 80dff0f Bind calls involving conditional and logical expressions

    There are 78 commits in total.

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    Reviewed by greenkeeper[bot] at 2017-11-08 07:43
  • 12. Bump terser from 4.6.2 to 4.8.1

    Bumps terser from 4.6.2 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)

    v4.8.0

    • Support for numeric separators (million = 1_000_000) was added.
    • Assigning properties to a class is now assumed to be pure.
    • Fixed bug where yield wasn't considered a valid property key in generators.

    v4.7.0

    • A bug was fixed where an arrow function would have the wrong size
    • arguments object is now considered safe to retrieve properties from (useful for length, or 0) even when pure_getters is not set.
    • Fixed erroneous const declarations without value (which is invalid) in some corner cases when using collapse_vars.

    v4.6.13

    • Fixed issue where ES5 object properties were being turned into ES6 object properties due to more lax unicode rules.
    • Fixed parsing of BigInt with lowercase e in them.

    v4.6.12

    • Fixed subtree comparison code, making it see that [1,[2, 3]] is different from [1, 2, [3]]
    • Printing of unicode identifiers has been improved

    v4.6.11

    • Read unused classes' properties and method keys, to figure out if they use other variables.
    • Prevent inlining into block scopes when there are name collisions
    • Functions are no longer inlined into parameter defaults, because they live in their own special scope.
    • When inlining identity functions, take into account the fact they may be used to drop this in function calls.
    • Nullish coalescing operator (x ?? y), plus basic optimization for it.
    • Template literals in binary expressions such as + have been further optimized

    v4.6.10

    • Do not use reduce_vars when classes are present

    v4.6.9

    • Check if block scopes actually exist in blocks

    v4.6.8

    • Take into account "executed bits" of classes like static properties or computed keys, when checking if a class evaluation might throw or have side effects.

    v4.6.7

    • Some new performance gains through a AST_Node.size() method which measures a node's source code length without printing it to a string first.

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-07-20 01:28
  • 13. BUG Drag improperly started on scroll or click w/modifier

    Overview of the problem

    Drags are initiated by clicks in a content scroll thumb or on a click w/keyboard modifier.

    I'm using react-rnd version 10.3.5

    My browser is Chrome, Safari.

    I am sure this issue is not a duplicate.

    Description

    The component should not start dragging in the following conditions (by default)

    • Scrolling primary content via scroll bar. A click on the scroll thumb will cause the window to be repositioned once the button is released.
    • Dragging should only be triggered by button 1 with no key modifiers. Right-click on OS may be effected by holding the control key with button 1; this should not trigger a drag, but does.

    Steps to Reproduce

    a) Use content bigger than the rnd component so that a scrollbar is present. Scroll by clicking and dragging on the scroll thumb. When the button is released, the rnd component jumps position. b) Hold down the control key and click on the component. On OSX, this brings up a context menu, select "Inspect Element". When the mouse/focus returns to the rnd window/view, the rnd component is still tracking an active drag.

    Expected behavior

    A click on a scrollbar thumb should not initiate a drag. A click with a keyboard modifier should not initiate a drag.

    Actual behavior

    A click on a scrollbar thumb initiates a drag, with the rnd component jumping when the button is released. A click with a keyboard modifier initiates a drag, with drag behavior varying depending on whether focus is changed.

    Reviewed by twall at 2022-06-06 15:29
  • 14. Question: set position in bottom right instead of top left?

    I have noticed that by default you can only initially place a Rnd element in a top left position, however, I want to place my element in the bottom right, so I need to set bottom-right to 0 and left the top left undeclared. I wish to know if that particular operation is possible, since it doesn't work with the style parameter.

    Reviewed by EduardoBreton at 2022-05-20 20:03
  • 15. Question: Can I prevent Rnd from being dragged onto a child of the bound parent?

    I have a div (let's call it "container") which contains a Rnd that I want to be able to be dragged and stay within the "container". There is also another div within this "container" (let's call it "no fly zone"). I do not want the Rnd to be able to be dragged and left inside the "no fly zone". Is it possible to have this behavior with react-rnd?

    I'm using react-rnd version 10.3.7

    My browser is: Chrome Version 101.0.4951.54

    I am sure this issue is not a duplicate

    Reproduced project

    https://codesandbox.io/s/purple-resonance-5613rb?file=/src/index.js:0-935

    Steps to Reproduce

    1. Visit my codesandbox.
    2. Drag the "Rnd" over the red bordered area
    3. Notice that I can drop it there. How can I prevent this?
    Reviewed by msueping at 2022-05-14 15:09
  • 16. Set default size only

    Is it possible to set the default size only? I would like to show card in the bottom of the screen with some default height, but if I use default property it always set the top and left to zero

    <Rnd
            default={{height: 500, width: '100%'}} // I don't want to set x and y here
            style={{
              position: 'fixed',
              bottom: 0,
            }}>
            <Component/>
          </Rnd>
    
    Reviewed by Karpengold at 2022-04-28 11:09
Jun 25, 2022
React file input component for complete control over styling and abstraction from file reading.

react-file-reader-input React file input component for complete control over styling and abstraction from file reading. <FileReaderInput as={dataForma

May 22, 2022
Simple declarative and universal A/B testing component for React.
Simple declarative and universal A/B testing component for React.

react-ab Simple declarative and universal A/B testing component for React. Demo Install npm install react-ab --save or bower install react-ab --save E

May 22, 2022
A React component that can virtualise lists and any set of children.

A list virtualiser that can create virtual rows out of arrays or a total count, or virtualise an arbitrary set of React components.

May 3, 2022
DataCamp's Design System and React component library.

DataCamp's Design System and React component library.

Apr 26, 2022
😎 Check if your react component are visible on the screen without pain and with performance in mind
😎 Check if your react component are visible on the screen without pain and with performance in mind

React on screen ?? Check if your react component are visible on the screen without pain and with performance in mind ?? ! React on screen Demo Install

Jul 24, 2022
@use-gesture is a library that let you bind richer mouse and touch events to any component or view.
@use-gesture is a library that let you bind richer mouse and touch events to any component or view.

??Bread n butter utility for component-tied mouse/touch gestures in React

Aug 3, 2022
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

react-universal-hooks React Universal Hooks : just use****** everywhere. Support React >= 16.8.0 Installation Using npm: $ npm install --save react-un

Aug 1, 2022
React Arts is a library of react functional component which provides canvas sketch board in the app.
React Arts is a library of react functional component which provides canvas sketch board in the app.

?? React Arts React Arts is a library of react functional component which provides canvas sketch board in the app. This library contains two react com

Jun 4, 2022
React component to blur image backgrounds using canvas.
React component to blur image backgrounds using canvas.

React Blur React component for creating blurred backgrounds using canvas. Live demo Installation npm install react-blur --save Usage var Blur = requir

Jul 28, 2022
📑 A React component to easily create demos of other components
📑 A React component to easily create demos of other components

React DemoTab ?? A React component to easily create demos of other components Install npm install react-demo-tab Demo DemoTab example Example import R

Jul 18, 2022
A React component to view a PDF document
A React component to view a PDF document

React PDF viewer A React component to view a PDF document. It's written in TypeScript, and powered by React hooks completely. // Core viewer import {

Jul 27, 2022
The react UI component for building complex filter criteria
 The react UI component for building complex filter criteria

React Filter Control The React component for building the composite filter criteria Demo (JS) | Demo (TS) Together With Data Table Overview Installati

Jun 25, 2022
React JSON Viewer Component, Extracted from redux-devtools

This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and pull requests. react-json-tre

Jul 18, 2022
React split-pane component

React Split Pane Split-Pane React component, can be nested or split vertically or horizontally! Installing npm install react-split-pane # or if you u

Aug 8, 2022
A simple React component to reproduce the way iOS deletes an item in a list
A simple React component to reproduce the way iOS deletes an item in a list

react-swipe-to-delete-ios A simple React component to reproduce the way iOS deletes an item in a list. Demo Installation yarn add react-swipe-to-delet

Jul 15, 2022
🎯 React component for transportation of modals, lightboxes, loading bars... to document.body or else.

React-portal Struggling with modals, lightboxes or loading bars in React? React-portal creates a new top-level React tree and injects its children int

Aug 1, 2022
Elegant, accessible search component for React.
Elegant, accessible search component for React.

Elegant, accessible search component for React with recent searches & current location functionality. Installation npm i react-find --save Usage impo

May 22, 2022
Augmented reality using React component

React example with MindAR AR project using React and MindAR The react component is inside src/MindARViewer. Everything else are created from create-re

Jun 11, 2021