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.
yarn add react-hook-resize-panel
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>
);
}
ResizePanel
props:initialWidth
Number, requiredResizeContent
props:width
into style
prop<div/>
ResizeHandleRight
props:<ResizeContent/>
when dragged to the left and grow <ResizeContent/>
when dragged to the rightreact-draggable
's DraggableCore
componentResizeHandleLeft
props:<ResizeContent/>
when dragged to the right and grow <ResizeContent/>
when dragged to the leftreact-draggable
's DraggableCore
component