SplitPaneProps Interface

Props for SplitPane component

Methods

Name Description
onChange(newSize: number): void Optional Callback is invoked with the current drag during a drag event.  
onDragFinished(newSize: number): void Optional This callback is invoked when a drag ends.  
onDragStarted(): void Optional This callback is invoked when a drag start.  
onResizerClick(event: MouseEvent): void Optional Callback is invoked if user clicks on Resizer.  
onResizerDoubleClick(event: MouseEvent): void Optional Callback is invoked if user double clicks on Resizer.  

Properties

Name Type Description
allowResize undefined | boolean Pass false to disable resizing  
children ReactNode[] The array of two react nodes, one for each pane.  
className undefined | string 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    
pane1ClassName undefined | string Class name to be added to Pane1's div  
pane1Style undefined | CSSProperties Styling to be applied to the first pane, with precedence over paneStyle  
pane2ClassName undefined | string Class name to be added to Pane2's div  
pane2Style undefined | CSSProperties Styling to be applied to the second pane, with precedence over paneStyle  
paneClassName undefined | string Class name to be added to each Pane's div  
paneStyle undefined | CSSProperties Styling to be applied to both panes  
primary "first" | "second" Determines which pane maintains its size when browser window is resized.  
resizerStyle undefined | CSSProperties Styling to be applied to the resizer bar  
size string | number Size of primary pane  
split "vertical" | "horizontal"    
step undefined | number You can use the step prop to only allow resizing in fixed increments.  
style undefined | CSSProperties Styling to be applied to the main container  

Defined in

Last Updated: 20 June, 2023