MagtonHub/react-resizable-layout

Headless React component and hook for resizable layout.

react-resizable-layout

Headless React component and hook for resizable layout.

Storybook Demo

Features

• 📦 Lightweight
• 🕳 Headless
• 🤏 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

Usage

Resizable component

import Resizable from 'react-resizable-layout';

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

useResizable hook

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

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

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

Configuration

Common Props

Name	Type	Default	Required	Description
axis	'x' or 'y'	-	◯	Resize direction
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	Splitter's position (Width for 'x' axis, height for 'y' axis)
isDragging	boolean	If dragging then true
splitterProps	object	Splitter's props like onMouseDown

About keyboard support

The following keyboard operations are supported.

Key	Operation
Arrow (↑,→,↓,←)	Move the splitter by 10px (default)
Shift + Arrow (↑,→,↓,←)	Move the splitter by 50px (default)
Enter	Reset the splitter to the initial position

Contribution

Please feel free to open an issue or make a pull request.

License

Distributed under the MIT License. See LICENSE for more information.