SplitPaneProps Interface
Deprecated in 4.17.0. Use React.ComponentProps<typeof SplitPane>
Props for SplitPane component
Properties
| Name | Type | Description | |
|---|---|---|---|
| allowResize | boolean | undefined | Pass false to disable resizing | |
| children | React.ReactNode[] | The array of two react nodes, one for each pane. | |
| className | string | undefined | Class name to be added to the SplitPane div | |
| defaultSize | string | number | Default initial size of primary pane | |
| maxSize | string | number | You can limit the maximal size of the 'fixed' pane using the maxSize parameter with a positive value | |
| minSize | string | number | ||
| onChange | (newSize: number) => void | undefined | Callback is invoked with the current drag during a drag event. | |
| onDragFinished | (newSize: number) => void | undefined | This callback is invoked when a drag ends. | |
| onDragStarted | () => void | undefined | This callback is invoked when a drag start. | |
| onResizerClick | (event: MouseEvent) => void | undefined | Callback is invoked if user clicks on Resizer. | |
| onResizerDoubleClick | (event: MouseEvent) => void | undefined | Callback is invoked if user double clicks on Resizer. | |
| pane1ClassName | string | undefined | Class name to be added to Pane1's div | |
| pane1Style | React.CSSProperties | undefined | Styling to be applied to the first pane, with precedence over paneStyle | |
| pane2ClassName | string | undefined | Class name to be added to Pane2's div | |
| pane2Style | React.CSSProperties | undefined | Styling to be applied to the second pane, with precedence over paneStyle | |
| paneClassName | string | undefined | Class name to be added to each Pane's div | |
| paneStyle | React.CSSProperties | undefined | Styling to be applied to both panes | |
| primary | "first" | "second" | Determines which pane maintains its size when browser window is resized. | |
| resizerStyle | React.CSSProperties | undefined | Styling to be applied to the resizer bar | |
| size | string | number | Size of primary pane | |
| split | "horizontal" | "vertical" | ||
| step | number | undefined | You can use the step prop to only allow resizing in fixed increments. | |
| style | React.CSSProperties | undefined | Styling to be applied to the main container |
Defined in
Last Updated: 24 June, 2025
Found something wrong, missing, or unclear on this page? Raise an issue in our repo.