A React component for creating split panes.
npm install split-pane-componentsh
npm install split-pane-component
`
`sh
yarn add split-pane-component
`
Usage
$3
`jsx
import React from 'react';
import Index from 'split-pane-component';
const App = () => (
split="vertical"
maxSize={200}
onDragStarted={() => console.log('Drag started')}
onDragFinished={(newSize) => console.log('Drag finished, new size:', newSize)}
className="custom-split-pane"
style={{ border: '1px solid black' }}
disableHoverEffect={false}
>
Index 1
Index 2
);
export default App;
`
$3
* children: ReactNode[] - The child elements to be displayed in the split panes.
* className: string (optional) - Additional CSS class for the component.
* split: SplitPaneSplitType (optional) - Determines whether the split is "vertical" or "horizontal".
* onDragStarted: () => void (optional) - Callback function called when dragging starts.
* onDragFinished: (newSize: number) => void (optional) - Callback function called when dragging finishes with the new size.
* style: CSSProperties (optional) - Additional inline styles for the component.
* onResize: onResizeSplitPane (optional) - Callback function called on resizing the pane.
* disableHoverEffect: boolean (optional) - Disables the hover effect if set to true.
License
$3
Development
* The project uses the stories directory for development. To start the development server, you can use the following script
`sh
yarn dev
``