Lightweight, accessible headless React component and hook for drag-and-drop resizable layouts.
npm install react-resizable-layout
A lightweight, accessible headless React component and hook for drag-and-drop resizable layouts.
- 📦 Lightweight
- 🕳 Headless
- 🫶🏽 Accessible
- 🤏 Drag and Drop Support
- ⌨️ Keyboard Support
- 🫙 Zero Dependencies
Install from npm:
``Using npm
npm install react-resizable-layout
Usage
$3
tsx
import Resizable from 'react-resizable-layout';
{({ position, separatorProps }) => (
)}
`$3
tsx
import { useResizable } from 'react-resizable-layout';const Component = () => {
const { position, separatorProps } = useResizable({
axis: 'x',
})
return (
)
}
`
Aria Props
The following attributes are added to 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
$3
| 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 |
$3
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 |