{"id":25141039,"url":"https://github.com/ryosogawa/react-resizable-layout","last_synced_at":"2025-05-16T09:02:41.735Z","repository":{"id":42523592,"uuid":"464910884","full_name":"RyoSogawa/react-resizable-layout","owner":"RyoSogawa","description":"Headless React component and hook for resizable layout.","archived":false,"fork":false,"pushed_at":"2025-01-22T06:46:21.000Z","size":9181,"stargazers_count":106,"open_issues_count":8,"forks_count":15,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-16T09:02:01.679Z","etag":null,"topics":["drag-and-drop","npm-package","react","resize","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-resizable-layout","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/RyoSogawa.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2022-03-01T13:46:49.000Z","updated_at":"2025-04-03T00:51:34.000Z","dependencies_parsed_at":"2024-06-18T22:49:31.910Z","dependency_job_id":"334ceb02-0d76-44b2-a700-bb16e3d5a517","html_url":"https://github.com/RyoSogawa/react-resizable-layout","commit_stats":{"total_commits":183,"total_committers":7,"mean_commits":"26.142857142857142","dds":0.1311475409836066,"last_synced_commit":"e476182fc0f995c23d78195ed6fc4389a1e56f7f"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":"RyoSogawa/npm-package-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyoSogawa%2Freact-resizable-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyoSogawa%2Freact-resizable-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyoSogawa%2Freact-resizable-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyoSogawa%2Freact-resizable-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RyoSogawa","download_url":"https://codeload.github.com/RyoSogawa/react-resizable-layout/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254501552,"owners_count":22081527,"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":["drag-and-drop","npm-package","react","resize","typescript"],"created_at":"2025-02-08T18:16:42.721Z","updated_at":"2025-05-16T09:02:41.649Z","avatar_url":"https://github.com/RyoSogawa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-resizable-layout\n\n[![npm version](https://badge.fury.io/js/react-resizable-layout.svg)](http://badge.fury.io/js/react-resizable-layout)\n[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)\n[![minziggped size](https://badgen.net/bundlephobia/minzip/react-resizable-layout)](https://bundlephobia.com/package/react-resizable-layout)\n[![dependencies count](https://badgen.net/bundlephobia/dependency-count/react-resizable-layout)](https://bundlephobia.com/package/react-resizable-layout)\n[![tree shaking](https://badgen.net/bundlephobia/tree-shaking/react-resizable-layout)](https://bundlephobia.com/package/react-resizable-layout)\n\nA lightweight, accessible headless React component and hook for drag-and-drop resizable layouts.\n\n![Hero Image](./hero.gif)\n\n[![Edit react-resizable-layout](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-resizable-layout-jy3vhk?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n[Storybook Demo](https://react-resizable-layout.vercel.app/)\n\n## Features\n\n- 📦 Lightweight\n- 🕳 Headless\n- 🫶🏽 Accessible \n- 🤏 Drag and Drop Support\n- ⌨️ Keyboard Support\n- 🫙 Zero Dependencies\n  \n\n## Installation\n\nInstall from npm:\n\n```\n# Using npm\nnpm install react-resizable-layout\n\n# Using Yarn\nyarn add react-resizable-layout\n\n# Using pnpm\npnpm add react-resizable-layout\n```\n  \n\n## Usage\n### `Resizable` component\n\n```tsx\nimport Resizable from 'react-resizable-layout';\n\n\u003cResizable axis={'x'}\u003e\n  {({ position, separatorProps }) =\u003e (\n    \u003cdiv className=\"wrapper\"\u003e\n      \u003cdiv className=\"left-block\" style={{ width: position }} /\u003e\n      \u003cYourSeparatorComponent {...separatorProps} /\u003e\n      \u003cdiv className=\"right-block\" /\u003e\n    \u003c/div\u003e\n  )}\n\u003c/Resizable\u003e\n```\n\n### `useResizable` hook\n\n```tsx\nimport { useResizable } from 'react-resizable-layout';\n\nconst Component = () =\u003e {\n  const { position, separatorProps } = useResizable({\n    axis: 'x',\n  })\n\n  return (\n    \u003cdiv className=\"wrapper\"\u003e\n      \u003cdiv className=\"left-block\" style={{ width: position }} /\u003e\n      \u003cYourSeparatorComponent {...separatorProps} /\u003e\n      \u003cdiv className=\"right-block\" /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n  \n\n## Aria Props\nThe following attributes are added to `separatorProps` in accordance with W3C.  \nhttps://www.w3.org/TR/wai-aria-1.2/#separator\n\n| Attribute        | Value                          |\n|------------------|--------------------------------|\n| role             | `'separator'`                  |\n| aria-valuenow    | `position`                     |\n| aria-valuemin    | `props.min`                    |\n| aria-valuemax    | `props.max`                    |\n| aria-orientation | `'vertical'` or `'horizontal'` |\n| aria-disabled    | `props.disabled`               |\n  \n\n## Configuration\n\n### Common Props\n\n| Name          | Type                    | Default  | Required | Description                                                               |\n|---------------|-------------------------|----------|----------|---------------------------------------------------------------------------|\n| axis          | 'x' or 'y'              | -        | ◯        | Resize direction                                                          |\n| containerRef  | ReactRef\u003cHTMLElement\u003e   | -        | -        | Reference to container for calculating position                           |\n| disabled      | boolean                 | false    | -        | Disable resize                                                            |\n| initial       | number                  | 0        | -        | Initial size                                                              |\n| min           | number                  | 0        | -        | Minimum size                                                              |\n| max           | number                  | Infinity | -        | Maximum size                                                              |\n| reverse       | boolean                 | false    | -        | If true, returns position of the opposite side                            |\n| step          | number                  | 10       | -        | Pixel steps when operating with keyboard                                  |\n| shiftStep     | number                  | 50       | -        | Pixel steps when operating with keyboard while holding down the shift key |\n| onResizeStart | function                | -        | -        | Callback on resize start                                                  |\n| onResizeEnd   | function                | -        | -        | Callback on resize end                                                    |\n\n### `Resizable` component children args\n\n`useResizable` hook returns same.\n\n| Name           | Type     | Description                                                    |\n|----------------|----------|----------------------------------------------------------------|\n| position       | number   | Separator's position (Width for 'x' axis, height for 'y' axis) |\n| endPosition    | number   | Separator's position at end of drag                            |\n| isDragging     | boolean  | True if dragging                                               |\n| separatorProps | object   | Separator's props like onPointerDown                           |\n| setPosition    | function | Set separator's position                                       |\n  \n\n## About keyboard support\nThe following keyboard operations are supported.\n\n| Key                               | Operation                                   |\n|-----------------------------------|---------------------------------------------|\n| Arrow (`↑`,`→`,`↓`,`←`)           | Move the separator by 10px (default)        |\n| `Shift` + Arrow (`↑`,`→`,`↓`,`←`) | Move the separator by 50px (default)        |\n| `Enter`                           | Reset the separator to the initial position |\n  \n\n## About mouse support\nDouble-click on the separator to return it to its initial position.\n  \n\n## Contribution\nFeel free to open an issue or make a pull request.\n  \n\n## License\nDistributed under the MIT License. See [LICENSE](./LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryosogawa%2Freact-resizable-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryosogawa%2Freact-resizable-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryosogawa%2Freact-resizable-layout/lists"}