{"id":13400550,"url":"https://github.com/react-grid-layout/react-resizable","last_synced_at":"2025-12-18T01:23:56.501Z","repository":{"id":25143816,"uuid":"28566095","full_name":"react-grid-layout/react-resizable","owner":"react-grid-layout","description":"A simple React component that is resizable with a handle. ","archived":false,"fork":false,"pushed_at":"2024-09-25T13:47:00.000Z","size":2047,"stargazers_count":2492,"open_issues_count":78,"forks_count":372,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-04-21T23:38:21.168Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://strml.github.io/react-resizable/examples/1.html","language":"JavaScript","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/react-grid-layout.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2014-12-28T16:22:51.000Z","updated_at":"2025-04-20T16:39:02.000Z","dependencies_parsed_at":"2024-05-10T14:56:21.978Z","dependency_job_id":"52491a6c-d820-484c-8805-21968c642f54","html_url":"https://github.com/react-grid-layout/react-resizable","commit_stats":{"total_commits":241,"total_committers":30,"mean_commits":8.033333333333333,"dds":0.1659751037344398,"last_synced_commit":"54a8518b68e189b31e72149e693d60bbf3bde5df"},"previous_names":["strml/react-resizable"],"tags_count":59,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-grid-layout%2Freact-resizable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-grid-layout%2Freact-resizable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-grid-layout%2Freact-resizable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-grid-layout%2Freact-resizable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-grid-layout","download_url":"https://codeload.github.com/react-grid-layout/react-resizable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250514754,"owners_count":21443208,"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":[],"created_at":"2024-07-30T19:00:53.208Z","updated_at":"2025-12-18T01:23:56.414Z","avatar_url":"https://github.com/react-grid-layout.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","JavaScript"],"sub_categories":["Uncategorized"],"readme":"### React-Resizable\n\n[View the Demo](https://react-grid-layout.github.io/react-resizable/index.html)\n\nA simple widget that can be resized via one or more handles.\n\nYou can either use the `\u003cResizable\u003e` element directly, or use the much simpler `\u003cResizableBox\u003e` element.\n\nSee the example and associated code in [ExampleLayout](/examples/ExampleLayout.js) and\n[ResizableBox](/lib/ResizableBox.js) for more details.\n\nMake sure you use the associated styles in [/css/styles.css](/css/styles.css), as without them, you will have\nproblems with handle placement and visibility.\n\nYou can pass options directly to the underlying `DraggableCore` instance by using the prop `draggableOpts`.\nSee the [demo](/examples/TestLayout.js) for more on this.\n\n### Installation\n\n    $ npm install --save react-resizable\n\n### Compatibility\n\n[React-Resizable 3.x](/CHANGELOG.md#3.0.0) is compatible with React `\u003e= 16.3`.\nReact-Resizable 2.x has been skipped.\n[React-Resizable 1.x](/CHANGELOG.md#1.11.1) is compatible with React `14-17`.\n\n### Usage\n\nThis package has two major exports:\n\n* [`\u003cResizable\u003e`](/lib/Resizable.js): A raw component that does not have state. Use as a building block for larger components, by listening to its\n  callbacks and setting its props.\n* [`\u003cResizableBox\u003e`](/lib/ResizableBox.js): A simple `\u003cdiv {...props} /\u003e` element that manages basic state. Convenient for simple use-cases.\n\n\n#### `\u003cResizable\u003e`\n```js\nconst {Resizable} = require('react-resizable');\n\n// ES6\nimport { Resizable } from 'react-resizable';\n\n// ...\nclass Example extends React.Component {\n  state = {\n    width: 200,\n    height: 200,\n  };\n\n  // On top layout\n  onResize = (event, {node, size, handle}) =\u003e {\n    this.setState({width: size.width, height: size.height});\n  };\n\n  render() {\n    return (\n      \u003cResizable height={this.state.height} width={this.state.width} onResize={this.onResize}\u003e\n        \u003cdiv className=\"box\" style={{width: this.state.width + 'px', height: this.state.height + 'px'}}\u003e\n          \u003cspan\u003eContents\u003c/span\u003e\n        \u003c/div\u003e\n      \u003c/Resizable\u003e\n    );\n  }\n}\n\n```\n\n\n#### `\u003cResizableBox\u003e`\n```js\nconst {ResizableBox} = require('react-resizable');\n\n// ES6\nimport { ResizableBox } from 'react-resizable';\n\nclass Example extends React.Component {\n  render() {\n    return (\n      \u003cResizableBox width={200} height={200} draggableOpts={{grid: [25, 25]}}\n          minConstraints={[100, 100]} maxConstraints={[300, 300]}\u003e\n        \u003cspan\u003eContents\u003c/span\u003e\n      \u003c/ResizableBox\u003e\n    );\n  }\n}\n```\n\n### Props\n\nThese props apply to both `\u003cResizable\u003e` and `\u003cResizableBox\u003e`. Unknown props that are not in the list below will be passed to the child component.\n\n```js\ntype ResizeCallbackData = {\n  node: HTMLElement,\n  size: {width: number, height: number},\n  handle: ResizeHandleAxis\n};\ntype ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';\n\ntype ResizableProps =\n{\n  children: React.Element\u003cany\u003e,\n  width: number,\n  height: number,\n  // Either a ReactElement to be used as handle, or a function returning an element that is fed the handle's location as its first argument.\n  handle: ReactElement\u003cany\u003e | (resizeHandle: ResizeHandleAxis, ref: ReactRef\u003cHTMLElement\u003e) =\u003e ReactElement\u003cany\u003e,\n  // If you change this, be sure to update your css\n  handleSize: [number, number] = [10, 10],\n  lockAspectRatio: boolean = false,\n  axis: 'both' | 'x' | 'y' | 'none' = 'both',\n  minConstraints: [number, number] = [10, 10],\n  maxConstraints: [number, number] = [Infinity, Infinity],\n  onResizeStop?: ?(e: SyntheticEvent, data: ResizeCallbackData) =\u003e any,\n  onResizeStart?: ?(e: SyntheticEvent, data: ResizeCallbackData) =\u003e any,\n  onResize?: ?(e: SyntheticEvent, data: ResizeCallbackData) =\u003e any,\n  draggableOpts?: ?Object,\n  resizeHandles?: ?Array\u003cResizeHandleAxis\u003e = ['se']\n};\n```\n\nThe following props can also be used on `\u003cResizableBox\u003e`:\n\n```js\n{\n  style?: Object // styles the returned \u003cdiv /\u003e\n}\n```\n\nIf a `width` or `height` is passed to `\u003cResizableBox\u003e`'s `style` prop, it will be ignored as it is required for internal function.\n\n#### Resize Handle\n\nIf you override the resize handle, we expect that any `ref` passed to your new handle with represent the underlying DOM element.\n\nThis is required, as `react-resizable` must be able to access the underlying DOM node to attach handlers and measure position deltas.\n\nThere are a few ways to do this:\n\n##### Native DOM Element\n\nThis requires no special treatment.\n\n```js\n\u003cResizable handle={\u003cdiv className=\"foo\" /\u003e} /\u003e\n```\n\n##### Custom React Component\n\nYou must [forward the ref](https://reactjs.org/docs/forwarding-refs.html) and props to the underlying DOM element.\n\n###### Class Components\n\n```js\nclass MyHandleComponent extends React.Component {\n  render() {\n    const {handleAxis, innerRef, ...props} = this.props;\n    return \u003cdiv ref={innerRef} className={`foo handle-${handleAxis}`} {...props} /\u003e\n  }\n}\nconst MyHandle = React.forwardRef((props, ref) =\u003e \u003cMyHandleComponent innerRef={ref} {...props} /\u003e);\n\n\u003cResizable handle={\u003cMyHandle /\u003e} /\u003e\n```\n\n###### Functional Components\n\n```js\nconst MyHandle = React.forwardRef((props, ref) =\u003e {\n  const {handleAxis, ...restProps} = props;\n  return \u003cdiv ref={ref} className={`foo handle-${handleAxis}`} {...restProps} /\u003e;\n});\n\n\u003cResizable handle={\u003cMyHandle /\u003e} /\u003e\n```\n\n##### Custom Function\n\nYou can define a function as a handle, which will simply receive an axis (see above `ResizeHandleAxis` type) and ref. This may be more clear to read, depending on your coding style.\n\n```js\nconst MyHandle = (props) =\u003e {\n  return \u003cdiv ref={props.innerRef} className=\"foo\" {...props} /\u003e;\n};\n\n\u003cResizable handle={(handleAxis, ref) =\u003e \u003cMyHandle innerRef={ref} className={`foo handle-${handleAxis}`} {...props} /\u003e} /\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-grid-layout%2Freact-resizable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-grid-layout%2Freact-resizable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-grid-layout%2Freact-resizable/lists"}