Package Exports
- react-hook-resize-panel
- react-hook-resize-panel/lib/index.js
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-hook-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 Hook MathJax
Dead simple resizable panel- only 100 lines of code. Lightweight, strongly typed package with almost no dependencies. It uses React Grid Layout and React Hooks to construct a resizable panel. For more details, take a look at the example project (which contains code for the gif below) or the live demo of the example project.
Install
yarn add react-hook-resize-panel
Usage
Basic inline display
import {
ResizeContent,
randleLeft,
ResizeHandleRight,
ResizePanel,
} from "react-hook-resize-panel";
export default function App() {
return (
<div style={{ flexFlow: "row nowrap", flexGrow: 1, display: "flex" }}>
<ResizePanel initialWidth={300}>
<ResizeContent style={{ backgroundColor: "#283430" }} />
<ResizeHandleRight>
<div
style={{
cursor: "col-resize",
width: 5,
backgroundColor: "black",
}}
/>
</ResizeHandleRight>
</ResizePanel>
<div style={{ flexGrow: 1, backgroundColor: "#34282c" }} />
<ResizePanel initialWidth={300}>
<ResizeHandleLeft>
<div
style={{
cursor: "col-resize",
width: 5,
backgroundColor: "black",
}}
/>
</ResizeHandleLeft>
<ResizeContent style={{ backgroundColor: "#283430" }} />
</ResizePanel>
<div />
</div>
);
}
API
ResizePanel
props:
initialWidth
Number, required
- Sets initial width of panel
- Does not currently support responsive / percentage values
ResizeContent
props:
- Will patch panel's
width
intostyle
prop - Passes all props directly into a
<div/>
ResizeHandleRight
props:
- Will shrink
<ResizeContent/>
when dragged to the left and grow<ResizeContent/>
when dragged to the right - Passed directly to
react-draggable
'sDraggableCore
component - See docs here for valid options: DraggableCore
ResizeHandleLeft
props:
- Will shrink
<ResizeContent/>
when dragged to the right and grow<ResizeContent/>
when dragged to the left - Passed directly to
react-draggable
'sDraggableCore
component - See docs here for valid options: DraggableCore