https://github.com/ryosogawa/react-resizable-layout
Headless React component and hook for resizable layout.
https://github.com/ryosogawa/react-resizable-layout
drag-and-drop npm-package react resize typescript
Last synced: 25 days ago
JSON representation
Headless React component and hook for resizable layout.
- Host: GitHub
- URL: https://github.com/ryosogawa/react-resizable-layout
- Owner: RyoSogawa
- License: mit
- Created: 2022-03-01T13:46:49.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-22T06:46:21.000Z (5 months ago)
- Last Synced: 2025-05-16T09:02:01.679Z (25 days ago)
- Topics: drag-and-drop, npm-package, react, resize, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-resizable-layout
- Size: 8.76 MB
- Stars: 106
- Watchers: 2
- Forks: 15
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-resizable-layout
[](http://badge.fury.io/js/react-resizable-layout)
[](LICENSE)
[](https://bundlephobia.com/package/react-resizable-layout)
[](https://bundlephobia.com/package/react-resizable-layout)
[](https://bundlephobia.com/package/react-resizable-layout)A lightweight, accessible headless React component and hook for drag-and-drop resizable layouts.

[](https://codesandbox.io/s/react-resizable-layout-jy3vhk?fontsize=14&hidenavigation=1&theme=dark)
[Storybook Demo](https://react-resizable-layout.vercel.app/)
## Features
- π¦ Lightweight
- π³ Headless
- π«Άπ½ Accessible
- π€ Drag and Drop Support
- β¨οΈ Keyboard Support
- π« Zero Dependencies
## Installation
Install from npm:
```
# Using npm
npm install react-resizable-layout# Using Yarn
yarn add react-resizable-layout# Using pnpm
pnpm add react-resizable-layout
```
## Usage
### `Resizable` component```tsx
import Resizable from 'react-resizable-layout';{({ position, separatorProps }) => (
)}```
### `useResizable` hook
```tsx
import { useResizable } from 'react-resizable-layout';const Component = () => {
const { position, separatorProps } = useResizable({
axis: 'x',
})return (
)
}
```
## Aria Props
The following attributes are added to `separatorProps` in accordance with W3C.
https://www.w3.org/TR/wai-aria-1.2/#separator| Attribute | Value |
|------------------|--------------------------------|
| role | `'separator'` |
| aria-valuenow | `position` |
| aria-valuemin | `props.min` |
| aria-valuemax | `props.max` |
| aria-orientation | `'vertical'` or `'horizontal'` |
| aria-disabled | `props.disabled` |
## Configuration
### Common Props
| Name | Type | Default | Required | Description |
|---------------|-------------------------|----------|----------|---------------------------------------------------------------------------|
| axis | 'x' or 'y' | - | β― | Resize direction |
| containerRef | ReactRef | - | - | Reference to container for calculating position |
| disabled | boolean | false | - | Disable resize |
| initial | number | 0 | - | Initial size |
| min | number | 0 | - | Minimum size |
| max | number | Infinity | - | Maximum size |
| reverse | boolean | false | - | If true, returns position of the opposite side |
| step | number | 10 | - | Pixel steps when operating with keyboard |
| shiftStep | number | 50 | - | Pixel steps when operating with keyboard while holding down the shift key |
| onResizeStart | function | - | - | Callback on resize start |
| onResizeEnd | function | - | - | Callback on resize end |### `Resizable` component children args
`useResizable` hook returns same.
| Name | Type | Description |
|----------------|----------|----------------------------------------------------------------|
| position | number | Separator's position (Width for 'x' axis, height for 'y' axis) |
| endPosition | number | Separator's position at end of drag |
| isDragging | boolean | True if dragging |
| separatorProps | object | Separator's props like onPointerDown |
| setPosition | function | Set separator's position |
## About keyboard support
The following keyboard operations are supported.| Key | Operation |
|-----------------------------------|---------------------------------------------|
| Arrow (`β`,`β`,`β`,`β`) | Move the separator by 10px (default) |
| `Shift` + Arrow (`β`,`β`,`β`,`β`) | Move the separator by 50px (default) |
| `Enter` | Reset the separator to the initial position |
## About mouse support
Double-click on the separator to return it to its initial position.
## Contribution
Feel free to open an issue or make a pull request.
## License
Distributed under the MIT License. See [LICENSE](./LICENSE) for more information.