react-split

import React from 'react'; import Split from 'react-split'; // Dummy components for demonstration purposes const PaneA = () => ( <div style={{ background: '#f0f0f0', padding: '20px', height: '100%', overflow: 'auto' }}> <h2>Pane A</h2> <p>This is the content for the first resizable pane. It starts at 25% of the container width.</p> <p>You can adjust its size by dragging the splitter.</p> </div> ); const PaneB = () => ( <div style={{ background: '#e0e0f0', padding: '20px', height: '100%', overflow: 'auto' }}> <h2>Pane B</h2> <p>This is the content for the second resizable pane. It starts at 75% of the container width.</p> <p>The `minSize` prop ensures panes don't shrink below a specified pixel value.</p> </div> ); function App() { return ( <div style={{ height: '500px', width: '80%', margin: '50px auto', display: 'flex', border: '1px solid #ddd', borderRadius: '4px', overflow: 'hidden' }}> <Split sizes={[25, 75]} minSize={100} expandToMin={false} gutterSize={10} gutterAlign="center" snapOffset={30} dragInterval={1} direction="horizontal" cursor="col-resize" className="split-container" elementStyle={(dimension, elementSize, gutterSize, index) => ({ flexBasis: `calc(${elementSize}% - ${gutterSize}px)` })} gutterStyle={(dimension, gutterSize, index) => ({ flexBasis: `${gutterSize}px` })} onDragStart={() => console.log('Drag started')} onDragEnd={(sizes) => console.log('Drag ended with sizes:', sizes)} > <PaneA /> <PaneB /> </Split> </div> ); } export default App;