Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@lgrasso/react-resize-panel

strimbob256ISC0.3.15

A very simple resizable panel as a React component. Demo here.

resize, split, panel

readme

react-resize-panel

current unsupported use this instead

https://www.npmjs.com/package/react-resize-panel

<ResizePanel direction="e">
  <div className="panel sidebar">left panel</div>
</ResizePanel>

Getting started

Install the package:

yarn install react-resize-panel

Import component:

import ResizePanel from "react-resize-panel";

Wrap the DIV you want to make resizable:

<ResizePanel direction="e">
  <div className="panel sidebar">left panel</div>
</ResizePanel>

The direction prop specifies which edge of the panel has the resize handle and whether the panel can be resized vertically or horizontally. Accepted values are: n | s | e | w.

Custom CSS classes can be specified for the resize handle and border:

<ResizePanel
  direction="e"
  handleClass="customHandle"
  borderClass="customResizeBorder"
>
  <div className="panel sidebar">left panel</div>
</ResizePanel>

Notes

Tests on all modern browsers performed via BrowserStack.

BrowserStack.com

License

MIT.