{"id":13400547,"url":"https://github.com/bokuweb/react-rnd","last_synced_at":"2025-05-13T15:07:44.090Z","repository":{"id":37735566,"uuid":"48902778","full_name":"bokuweb/react-rnd","owner":"bokuweb","description":"🖱  A resizable and draggable component for React.","archived":false,"fork":false,"pushed_at":"2025-04-30T10:50:51.000Z","size":28946,"stargazers_count":4092,"open_issues_count":176,"forks_count":333,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-04-30T12:09:37.590Z","etag":null,"topics":["component","drag","draggable","react","resizable","resize"],"latest_commit_sha":null,"homepage":"https://bokuweb.github.io/react-rnd/stories","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bokuweb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["bokuweb"]}},"created_at":"2016-01-02T07:47:27.000Z","updated_at":"2025-04-29T23:50:07.000Z","dependencies_parsed_at":"2023-02-12T11:30:50.833Z","dependency_job_id":"53ff598c-532e-49ce-a00e-3f02bea1ee78","html_url":"https://github.com/bokuweb/react-rnd","commit_stats":{"total_commits":715,"total_committers":47,"mean_commits":"15.212765957446809","dds":0.6797202797202797,"last_synced_commit":"e869e5f258410226a945785188ecc8cc02a515e2"},"previous_names":["bokuweb/react-resazable-and-movable","bokuweb/react-resizable-and-movable"],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bokuweb%2Freact-rnd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bokuweb%2Freact-rnd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bokuweb%2Freact-rnd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bokuweb%2Freact-rnd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bokuweb","download_url":"https://codeload.github.com/bokuweb/react-rnd/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251700986,"owners_count":21629848,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","drag","draggable","react","resizable","resize"],"created_at":"2024-07-30T19:00:53.173Z","updated_at":"2025-05-05T21:09:56.209Z","avatar_url":"https://github.com/bokuweb.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\u003cimg src =\"https://github.com/bokuweb/react-rnd/blob/master/logo.png?raw=true\" /\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eA resizable and draggable component for React.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://github.com/bokuweb/react-rnd/workflows/Continuous%20Integration/badge.svg\" alt=\"Build Status\" /\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-rnd\"\u003e\n\u003cimg src=\"https://img.shields.io/npm/v/react-rnd.svg\" alt=\"Build Status\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-rnd\"\u003e\n\u003cimg src=\"https://img.shields.io/npm/dm/react-rnd.svg\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://renovatebot.com/\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/renovate-enabled-brightgreen.svg\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/prettier/prettier\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/styled_with-prettier-ff69b4.svg\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Table of Contents\n\n* [Screenshot](#Screenshot)\n* [Live Demo](#live-demo)\n  * [Storybook](#storybook)\n  * [CodeSandbox](#codesandbox)\n* [Install](#install)\n* [Usage](#usage)\n* [Props](#props)\n* [Instance API](#instance-api)\n  * [updateSize(size: { width: number | string, height: number | string }): void](#updateSize-void)\n  * [updatePosition({ x: number, y: number }): void](#updatePosition-void)\n* [Test](#test)\n* [Related](#related)\n* [Changelog](#changelog)\n* [License](#license)\n\n\n## Screenshot\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/bokuweb/react-rnd/master/screenshot.gif\" /\u003e\n\u003c/p\u003e\n\nhttps://codesandbox.io/s/xpm699v4lp\n\n## Live Demo\n\n### Storybook\n\n[Storybook](http://bokuweb.github.io/react-rnd/stories)\n\n### CodeSandbox\n\n[![Edit y3997qply9](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/y3997qply9)   \n[CodeSandbox(with default)](https://codesandbox.io/s/y3997qply9)    \n[CodeSandbox(with size and position)](https://codesandbox.io/s/my4kjly94x)    \n[CodeSandbox(with typescript)](https://codesandbox.io/s/j1vvkpo9wv)   \n[CodeSandbox(with hooks)](https://codesandbox.io/p/sandbox/pensive-babycat-8kxhnr)\n\n\n## Install\n\n- use npm\n\n```sh\nnpm i -S react-rnd\n```\n\n- use yarn\n\n```sh\nyarn add react-rnd\n```\n\n## Usage\n\n### Example with `default`\n\n``` javascript\n\u003cRnd\n  default={{\n    x: 0,\n    y: 0,\n    width: 320,\n    height: 200,\n  }}\n\u003e\n  Rnd\n\u003c/Rnd\u003e\n```\n\n### Example with `position` and `size`\n\n``` javascript\n\u003cRnd\n  size={{ width: this.state.width,  height: this.state.height }}\n  position={{ x: this.state.x, y: this.state.y }}\n  onDragStop={(e, d) =\u003e { this.setState({ x: d.x, y: d.y }) }}\n  onResizeStop={(e, direction, ref, delta, position) =\u003e {\n    this.setState({\n      width: ref.style.width,\n      height: ref.style.height,\n      ...position,\n    });\n  }}\n\u003e\n  001\n\u003c/Rnd\u003e\n```\n\n## Props\n\n#### `default: { x: number; y: number;  width?: number | string;  height?: number | string; };`\n\nThe `width` and `height` property is used to set the default size of the component.\nFor example, you can set `300`, `'300px'`, `50%`.\nIf omitted, set `'auto'`.\n\nThe `x` and `y` property is used to set the default position of the component.\n\n#### `size?: { width: (number | string), height: (number | string) };`\n\nThe `size` property is used to set size of the component.\nFor example, you can set 300, '300px', 50%.\n\nUse `size` if you need to control size state by yourself.\n\n#### `position?: { x: number, y: number };`\n\nThe `position` property is used to set position of the component.\nUse `position` if you need to control size state by yourself.\n\nsee, following example.\n\n``` javascript\n\u003cRnd\n  size={{ width: this.state.width,  height: this.state.height }}\n  position={{ x: this.state.x, y: this.state.y }}\n  onDragStop={(e, d) =\u003e { this.setState({ x: d.x, y: d.y }) }}\n  onResize={(e, direction, ref, delta, position) =\u003e {\n    this.setState({\n      width: ref.offsetWidth,\n      height: ref.offsetHeight,\n      ...position,\n    });\n  }}\n\u003e\n  001\n\u003c/Rnd\u003e\n```\n\n#### `className?: string;`\n\nThe `className` property is used to set the custom `className` of the component.\n\n#### `style?: { [key: string]: string };`\n\nThe `style` property is used to set the custom `style` of the component.\n\n#### `minWidth?: number | string;`\n\nThe `minWidth` property is used to set the minimum width of the component.\nFor example, you can set `300`, `'300px'`, `50%`.\n\n#### `minHeight?: number | string;`\n\nThe `minHeight` property is used to set the minimum height of the component.\nFor example, you can set `300`, `'300px'`, `50%`.\n\n#### `maxWidth?: number | string;`\n\nThe `maxWidth` property is used to set the maximum width of the component.\nFor example, you can set `300`, `'300px'`, `50%`.\n\n#### `maxHeight?: number | string`;\n\nThe `maxHeight` property is used to set the maximum height of the component.\nFor example, you can set `300`, `'300px'`, `50%`.\n\n#### `resizeGrid?: [number, number];`\n\nThe `resizeGrid` property is used to specify the increments that resizing should snap to. Defaults to `[1, 1]`.\n\n#### `dragGrid?: [number, number];`\n\nThe `dragGrid` property is used to specify the increments that moving should snap to. Defaults to `[1, 1]`.\n\n#### `lockAspectRatio?: boolean | number;`\n\nThe `lockAspectRatio` property is used to lock aspect ratio.\nSet to `true` to lock the aspect ratio based on the initial size.\nSet to a numeric value to lock a specific aspect ratio (such as `16/9`).\nIf set to numeric, make sure to set initial height/width to values with correct aspect ratio.\nIf omitted, set `false`.\n\n#### `lockAspectRatioExtraWidth?: number;`\n\nThe `lockAspectRatioExtraWidth` property enables a resizable component to maintain an aspect ratio plus extra width.\nFor instance, a video could be displayed 16:9 with a 50px side bar.\nIf omitted, set `0`.\n\n#### `scale?: number;`\n\nSpecifies the scale of the canvas you are dragging or resizing this element on. This allows\nyou to, for example, get the correct drag / resize deltas while you are zoomed in or out via\na transform or matrix in the parent of this element.\nIf omitted, set `1`.\n\n#### `lockAspectRatioExtraHeight?: number;`\n\nThe `lockAspectRatioExtraHeight` property enables a resizable component to maintain an aspect ratio plus extra height.\nFor instance, a video could be displayed 16:9 with a 50px header bar.\nIf omitted, set `0`.\n\n#### `dragHandleClassName?: string;`\n\nSpecifies a selector to be used as the handle that initiates drag.\nExample: `handle`.\n\n#### `resizeHandleStyles?: HandleStyles;`\n\nThe `resizeHandleStyles` property is used to override the style of one or more resize handles.\nOnly the axis you specify will have its handle style replaced.\nIf you specify a value for `right` it will completely replace the styles for the `right` resize handle,\nbut other handle will still use the default styles.\n\n``` javascript\n\nexport type HandleStyles = {\n  bottom?: React.CSSProperties,\n  bottomLeft?: React.CSSProperties,\n  bottomRight?: React.CSSProperties,\n  left?: React.CSSProperties,\n  right?: React.CSSProperties,\n  top?: React.CSSProperties,\n  topLeft?: React.CSSProperties,\n  topRight?: React.CSSProperties\n}\n```\n\n#### `resizeHandleClasses?: HandleClasses;`\n\nThe `resizeHandleClasses` property is used to set the className of one or more resize handles.\n\n``` javascript\ntype HandleClasses = {\n  bottom?: string;\n  bottomLeft?: string;\n  bottomRight?: string;\n  left?: string;\n  right?: string;\n  top?: string;\n  topLeft?: string;\n  topRight?: string;\n}\n```\n\n#### `resizeHandleComponent?`: HandleCompoent;`\n\nThe `resizeHandleComponent` allows you to pass a custom React component as the resize handle.\n\n``` javascript\ntype HandleComponent = {\n  top?: React.ReactElement\u003cany\u003e;\n  right?: React.ReactElement\u003cany\u003e;\n  bottom?: React.ReactElement\u003cany\u003e;\n  left?: React.ReactElement\u003cany\u003e;\n  topRight?: React.ReactElement\u003cany\u003e;\n  bottomRight?: React.ReactElement\u003cany\u003e;\n  bottomLeft?: React.ReactElement\u003cany\u003e;\n  topLeft?: React.ReactElement\u003cany\u003e;\n}\n```\n\n#### `resizeHandleWrapperClass?: string;`\n\nThe `resizeHandleWrapperClass` property is used to set css class name of resize handle wrapper(`span`) element.\n\n#### `resizeHandleWrapperStyle?: Style;`\n\nThe `resizeHandleWrapperStyle` property is used to set css class name of resize handle wrapper(`span`) element.\n\n#### `enableResizing?: ?Enable;`\n\nThe `enableResizing` property is used to set the resizable permission of the component.\n\nThe permission of `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, `topLeft` direction resizing.\nIf omitted, all resizer are enabled.\nIf 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 }`.\n\n``` javascript\nexport type Enable = {\n  bottom?: boolean;\n  bottomLeft?: boolean;\n  bottomRight?: boolean;\n  left?: boolean;\n  right?: boolean;\n  top?: boolean;\n  topLeft?: boolean;\n  topRight?: boolean;\n} | boolean\n```\n\n#### `disableDragging?: boolean;`\n\nThe `disableDragging` property disables dragging completely.\n\n#### `cancel?: string;`\n\nThe `cancel` property disables specifies a selector to be used to prevent drag initialization (e.g. `.body`).\n\n#### `dragAxis?: 'x' | 'y' | 'both' | 'none'`\n\nThe direction of allowed movement (dragging) allowed ('x','y','both','none').\n\n#### `bounds?: string; | Element`\n\nSpecifies movement boundaries. Accepted values:\n - `parent` restricts movement within the node's offsetParent\n    (nearest node with position relative or absolute)\n - `window`, `body`, Selector like `.fooClassName` or\n - `Element`.\n\n\n#### `enableUserSelectHack?: boolean;`\n\nBy default, we add 'user-select:none' attributes to the document body    \nto prevent ugly text selection during drag. If this is causing problems    \nfor your app, set this to `false`.    \n\n#### `scale?: number;`\n\nSpecifies the scale of the canvas your are resizing and dragging this element on. This allows\nyou to, for example, get the correct resize and drag deltas while you are zoomed in or out via\na transform or matrix in the parent of this element.\nIf omitted, set `1`.\n\n## Callback\n\n#### `onResizeStart?: RndResizeStartCallback;`\n\n`RndResizeStartCallback` type is below.\n\n``` javascript\nexport type RndResizeStartCallback = (\n  e: SyntheticMouseEvent\u003cHTMLDivElement\u003e | SyntheticTouchEvent\u003cHTMLDivElement\u003e,\n  dir: ResizeDirection,\n  refToElement: React.ElementRef\u003c'div'\u003e,\n) =\u003e void;\n```\n\nCalls when resizable component resize start.\n\n#### `onResize?: RndResizeCallback;`\n\n`RndResizeCallback` type is below.\n\n``` javascript\nexport type RndResizeCallback = (\n  e: MouseEvent | TouchEvent,\n  dir: ResizeDirection,\n  refToElement: React.ElementRef\u003c'div'\u003e,\n  delta: ResizableDelta,\n  position: Position,\n) =\u003e void;\n```\n\nCalls when resizable component resizing.\n\n#### `onResizeStop?: RndResizeCallback;`\n\n`RndResizeCallback` type is below.\n\n``` javascript\nexport type RndResizeCallback = (\n  e: MouseEvent | TouchEvent,\n  dir: ResizeDirection,\n  refToElement: React.ElementRef\u003c'div'\u003e,\n  delta: ResizableDelta,\n  position: Position,\n) =\u003e void;\n```\n\nCalls when resizable component resize stop.\n\n#### `onDragStart: DraggableEventHandler;`\n\nCallback called on dragging start.\n\n``` javascript\ntype DraggableData = {\n  node: HTMLElement,\n  x: number,\n  y: number,\n  deltaX: number, deltaY: number,\n  lastX: number, lastY: number\n};\n\ntype DraggableEventHandler = (\n  e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,\n) =\u003e void | false;\n```\n\n#### `onDrag: DraggableEventHandler;`\n\n`onDrag` called with the following parameters:\n\n``` javascript\ntype DraggableData = {\n  node: HTMLElement,\n  x: number,\n  y: number,\n  deltaX: number, deltaY: number,\n  lastX: number, lastY: number\n};\n\ntype DraggableEventHandler = (\n  e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,\n) =\u003e void | false;\n```\n\n#### `onDragStop: DraggableEventHandler;`\n\n`onDragStop` called on dragging stop.\n\n\n``` javascript\ntype DraggableData = {\n  node: HTMLElement,\n  x: number,\n  y: number,\n  deltaX: number, deltaY: number,\n  lastX: number, lastY: number\n};\n\ntype DraggableEventHandler = (\n  e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,\n) =\u003e void | false;\n```\n\n## Instance API\n\n\n#### `updateSize(size: { width: string | number, height: string | number })`\n\nUpdate component size.\nFor example, you can set `300`, `'300px'`, `50%`.\n\n- for example\n\n``` js\nclass YourComponent extends Component {\n\n  ...\n\n  update() {\n    this.rnd.updateSize({ width: 200, height: 300 });\n  }\n\n  render() {\n    return (\n      \u003cRnd ref={c =\u003e { this.rnd = c; }} ...rest \u003e\n        example\n      \u003c/Rnd\u003e\n    );\n  }\n  ...\n}\n```\n\n#### `updatePosition({ x: number, y: number }): void`\n\nUpdate component position.\n`grid` `bounds` props is ignored, when this method called.\n\n- for example\n\n``` js\nclass YourComponent extends Component {\n\n  ...\n\n  update() {\n    this.rnd.updatePosition({ x: 200, y: 300 });\n  }\n\n  render() {\n    return (\n      \u003cRnd ref={c =\u003e { this.rnd = c; }} ...rest \u003e\n        example\n      \u003c/Rnd\u003e\n    );\n  }\n\n  ...\n}\n```\n\n#### `allowAnyClick?: boolean`\n\nIf set to `true`, will allow dragging on non left-button clicks.\n\n## Test\n\n``` sh\nnpm t\n```\n\n## Contribute\n\nIf you have a feature request, please add it as an issue or make a pull request.\n\nIf you have a bug to report, please reproduce the bug in [CodeSandbox](https://codesandbox.io/s/y3997qply9) to help us easily isolate it.\n\n## Changelog\n\n#### v10.5.1\n\n- Upgrade `re-resizable` to `6.11.0`\n- Add missing position offset prop\n\n#### v10.4.14\n\n- Upgrade `re-resizable` to `6.10.3`\n\n#### v10.4.13\n\n- Upgrade `re-resizable` to `6.10.0`\n\n#### v10.4.12\n\n- Fixes $945, When using vite and resizing from other than right and bottom - the element is shaking weirdly.\n\n- Upgrade `re-resizable` to `6.9.17`\n- Fixes #942, define callback refs inline to work with latest versions of Next.js / React.\n\n#### v10.4.10\n\n- Upgrade `re-resizable` to `6.9.14`\n\n#### v10.4.7\n\n- Fixed a bug, `maxHeight` does not work with `%` #914\n\n#### v10.4.6\n\n- Upgrade `re-resizable` to `6.9.11`\n- Upgrade `react-draggable` to `4.4.6`\n- Fixed a bug, wrong position in `onDrag` #910\n\n#### v10.4.1\n\n- Support Element for bounds.\n\n#### v10.3.7\n\n- Upgrade `re-resizable` to `6.9.6`\n- Add peer deps.\n\n\n#### v10.3.6\n\n- Upgrade `re-resizable` to `6.9.2`\n- Upgrade `react-draggable` to v4.4.4\n\n#### v10.3.5\n\n- Upgrade `re-resizable` to `6.9.1`\n\n#### v10.3.4\n\n- Fixed a bound check with locked aspect ratio (fully fixes #209)\n\n#### v10.3.1, v10.3.2\n\n- Fixed a bug, top and left resize issue, caused by \"position\" #792\n\n#### v10.3.0\n\n- Fixed a callback position when dragAxis specified\n\n#### v10.2.5\n\n- Fixed a glitch when dragAxis is enabled and component is being resized #780\n\n#### v10.2.3\n\n- Fixed a bug, if set minWidth or minHeight with `px`, reize dowes not work. #739\n\n#### v10.2.0\n\n- Upgrade `react-draggable` to v4.4.3\n- Add `allowAnyClick` props.\n- Add `nodeRef` props.\n\n#### v10.1.10\n\n- Downgrade `react-draggable` to v4.2.0 #690\n\n#### v10.1.9\n\n- Update `react-draggable` to v4.3.1\n\n#### v10.1.8\n\n- Update `re-resizable` to v6.3.2\n\n#### v10.1.7\n\n- A minor fix for a bug with forwarding of cancelling indication of an onDrag event. (#667)\n\n#### v10.1.6\n\n- Fixes #641 without causing other issues with typing.\n\n#### v10.1.5\n\n- Fixed a bug, react-draggable not bundling with rollup #641\n\n#### v10.1.4\n\n- Fixed a bug, box moves when resized  #622\n\n#### v10.1.3\n\n- Fixed a bug, position is wrong when onResize #618\n\n#### v10.1.2\n\n- Upgrade re-resizable to 6.1.1\n- Upgrade react-draggable to 4.1.0\n\n#### v10.1.1\n\n- Upgrade re-resizable to 6.1.0\n\n#### v10.1.0\n\n- Implement resizeHandleComponent #591\n- Update dependency react-draggable to v4\n\n#### v10.0.0\n\n- Fix: Fix #526\n- Feat: Add `onMouseUp` callback. \n- Feat: Use `React.pureComponent`\n\n#### v9.2.0\n\n- Chore: Use `re-resizablev5` \n\n#### v9.1.2\n\n- Fix: Fixes memory leak #499\n\n#### v9.1.1\n\n- Fix: Add `scale` props to index.js.flow.\n\n#### v9.1.0\n\n- Feat: Add `scale` props. #482\n- Feat: Upgrade deps.\n\n#### v9.0.4\n\n- Fix: cursor style #469\n\n#### v9.0.3\n\n- update dependency re-resizable to v4.9.3 #444\n\n#### v9.0.2\n\n- fix: resizeHandleWrapperClass warning shown in console #428\n\n#### v9.0.1\n\n- fix: Allow additional props in typescript.\n\n#### v9.0.0\n\n- fix: change `default export` to `export` #405\n\n#### v8.0.2\n\n- fix: fixed a bug, `bounds` is ignored when lock aspect ratio set.\n- feat: add `body` to bounds props.\n\n#### v8.0.1\n\n- fix: [#221] fixed a bug, maxwidth / height not applied.\n\n#### v8.0.0\n\n- fix: fixed some position and resizing bug.       \n- fix: [#209] bounds `window`. you can check [here](http://bokuweb.github.io/react-rnd/stories/?selectedKind=bounds\u0026selectedStory=window%20controlled\u0026full=0\u0026addons=1\u0026stories=1\u0026panelRight=0\u0026addonPanel=storybook%2Factions%2Factions-panel).       \n- fix: [#317] add onMouseDown. i.e) `\u003cRnd onMouseDown={...} /\u003e`      \n- [BREAKING] fix: [#335] add . to `dragHandleClassName` automatically, Please pass string (i.e `handle`.      \n- [BREAKING] fix: remove `extendsProps`. Please add extends props directly. i.e) `\u003cRnd data-foo=\"42\" /\u003e`      \n- [BREAKING] fix: remove `z` props. Please add `zIndex` via `style` props. i.e) `\u003cRnd style={{ zIndex: 9 }} /\u003e`\n\n#### v8.0.0-beta.2\n\n- fix: Upgrade `re-resizable` to fix percentage size and bare behavior.\n\n#### v8.0.0-beta.1\n\n- fix: Fixed a bug, controlled position does not work correctly.\n- feat: Use `typescript` instead of `flowype`.\n\n#### v8.0.0-beta.0\n\n- fix: Remove dummy `\u003cdiv /\u003e`, `isMounted` state and `setParentPosition()`.\n\n#### v7.4.3\n\n- fix: Add `props,children` to dummy `\u003cdiv\u003e` to render children in first.\n\n#### v7.4.2 (unpublished)\n\nfix: `isMounted` and `(!this.state.isMounted) return \u003cdiv /\u003e` line #356\n\n#### v7.4.1\n\n- fix: Fixed Array.from error in IE11\n\n#### v7.4.0\n\n- fix: add `enableUserSelectHack?: boolean;`.\n\n#### v7.3.1\n\n- chore(deps): upgrade deps\n- chore(deps): upgrade lint and remove unused state\n- chore(deps): install prettier\n\n#### v7.3.0\n\n- chore(deps): upgrade re-resizable\n\n#### v7.2.0\n\n- Support for cancel feature of react-draggable #206\n\n#### v7.1.5\n\n- Fixed a issue #199 Add enableUserSelectHack props to react-draggable\n\n#### v7.1.4\n\n- Fixed a issue #188 maxWidth and maxHeight props don't respect after resize\n\n#### v7.1.3\n \n- Fixed a bug, `extendProps` is not passed correctly.\n- Fixed a bug, `bounds` is not work correctly. (#162)\n\n#### v7.1.1 / v7.1.2\n\n- Add internal props.\n\n#### v7.1.0\n\n- Add `size`.\n- Add `position`.\n\n#### v7.0.0\n\n- Add `default` instead of `x`, `y`, `width`, `height`.\n- Add `resizeHandleWrapperClass` and `resizeHandleWrapperStyle`.\n\n#### v6.0.1\n\n- Remove unnecessary types.\n\n#### v6.0.0\n\n- Use rollup.\n- Support % min/max size.\n- Change props, remove `default` and add `x`, `y`, `width`, `height`.\n- Rename `dragHandlersXXXX` and `resizeHandlersXXXX` props to `dragHandleXXXX` and `resizeHandleXXXX`.\n\n#### v5.1.3\n\n- Fix cursor style, set `normal` to cursor style when `dragHandlerClassName` is not empty.\n\n#### v5.1.2\n\n- Add position `relative` when component will update.\n\n#### v5.1.1\n\n- Add `top: 0`, `left: 0`.\n- Add position `relative` when parent position equals `static`.\n\n#### v5.1.0\n\n- Update dependencies(`react-draggable v3`, `flow-bin v0.53`, and other...)\n\n#### v5.0.9\n\n- Fix bug new `z` props is not applied to state.\n\n#### v5.0.8\n\n- Add `extendsProps`. #129\n\n#### v5.0.7\n\n- Add `disableDragging` props.\n\n#### v5.0.6\n\n- Fix flow error.\n\n#### v5.0.5\n\n- Add index.js.flow\n\n#### v5.0.4\n\n- Fix Issue #117.\n\n#### v5.0.3\n\n- Fix `updateZIndex`.\n- Fix `updateSize`.\n- Fix left and top bounds.\n\n#### v5.0.2\n\n- Fix argument events #100\n\n#### v5.0.1\n\n- Fix example\n- Update README\n\n#### v5.0.0\n\n- Fix resize bounds.\n- Modify API.\n- Use original `react-draggable`.\n\n\n#### v4.2.1\n\n- Added `updateZIndex`, method to updated component `zIndex` state.\n\n#### v4.2.0\n\n- Pass the new position in the onResizeStop callback #60\n\n\n#### v4.1.0\n\n- Pass the new position along in the resize callback #55\n\n\n#### v4.0.1\n\n- Fix style props to applt zIndex chaned.\n\n#### v4.0.0\n\n- Rename `react-rnd`.\n- Remove `canUpdatePositionByParent` property.\n- Remove `canUpdateSizeByParent` property.\n- Remove `initiAsResizing` property.\n- Change `x`, `y`, `width` and `height` property to `initial`.\n- Add `updateSize`, `updatePosition`, method to updated conponent state.\n- Add `lockAspectRatio` property to lock aspect ratio when resizing.\n\n#### v3.0.0\n\n- Add `canUpdatePositionByParent` property.\n\n#### v2.0.0\n\n- Fix bug, resize and grid not work properly.\n\n#### v1.2.0\n\n- Add `grid` props to snap grid. (thanks @paulyoung)\n- Fix bug, moveAxis not work properly.\n\n\n#### v1.1.3\n\n- Fix situations when on dragStop you wanted to revert to 0,0 position #39\n- Add `canUpdateSizeByParent` props #38\n\n#### v1.1.2\n\n- Add object.assign transform\n\n#### v1.1.0\n\n- Add add module exports plugin for `require`\n\n#### v1.0.1\n\n- Bug fix\n\n#### v1.0.0\n\n- Support react v15.x\n- Support left, top resizer\n- Remove start props, use width, height, x, and y.\n\n#### v0.5.3\n\n- Add handle selector\n\n## License\n\nThe MIT License (MIT)\n\nCopyright (c) 2018 bokuweb\n\nPermission 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:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE 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.\n","funding_links":["https://github.com/sponsors/bokuweb"],"categories":["Drag \u0026 Drop","Uncategorized","TypeScript"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbokuweb%2Freact-rnd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbokuweb%2Freact-rnd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbokuweb%2Freact-rnd/lists"}