JSPM

  • Created
  • Published
  • Downloads 2932
  • Score
    100M100P100Q145169F

Package Exports

  • react-resize-panel

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-resize-panel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>

Notes

Tests on all modern browsers performed via BrowserStack.

BrowserStack.com

License

MIT.