split-pane-component
v1.0.24
Published
A React component for creating split panes.
Downloads
131
Readme
Split Index Component
A powerful and flexible React component for creating resizable split panes. Compatible with React 18 and built with Vite.
Installation
You can install the package via npm or yarn:
npm install split-pane-component
yarn add split-pane-component
Usage
Here is an example of how to use the component:
import React from 'react';
import Index from 'split-pane-component';
const App = () => (
<Index
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}
>
<div>Index 1</div>
<div>Index 2</div>
</Index>
);
export default App;
Props
- 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
This project is licensed under the MIT License.
Development
- The project uses the stories directory for development. To start the development server, you can use the following script
yarn dev