react-resize-panel | Compare Similar npm Packages

Find Similar Packages for react-resize-panel

Package	Downloads	Stars	Size	Issues	Publish	License

react-resize-panel	4,185	-	-	-	5 years ago	-

react-resize-panel

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

Resize panel demo

<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>

License

MIT.