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: about 1 month 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 (about 1 month 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.