search

RyoSogawa / react-resizable-layout

Headless React component and hook for resizable layout.
https://www.npmjs.com/package/react-resizable-layout
MIT License
90 stars 14 forks source link
drag-and-drop npm-package react resize typescript

readme

react-resizable-layout

npm version MIT License minziggped size dependencies count tree shaking

A lightweight, accessible headless React component and hook for drag-and-drop resizable layouts.

Hero Image

Edit react-resizable-layout

Storybook Demo

Features

Installation

Install from npm:

# Using npm
npm install react-resizable-layout

# Using Yarn
yarn add react-resizable-layout

Usage

Resizable component

import Resizable from 'react-resizable-layout';

<Resizable axis={'x'}>
  {({ position, separatorProps }) => (
    <div className="wrapper">
      <div className="left-block" style={{ width: position }} />
      <YourSeparatorComponent {...separatorProps} />
      <div className="right-block" />
    </div>
  )}
</Resizable>

useResizable hook

import { useResizable } from 'react-resizable-layout';

const Component = () => {
  const { position, separatorProps } = useResizable({
    axis: 'x',
  })

  return (
    <div className="wrapper">
      <div className="left-block" style={{ width: position }} />
      <YourSeparatorComponent {...separatorProps} />
      <div className="right-block" />
    </div>
  )
}

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 for more information.