Example
Patterns
Primary and Secondary
The term “primary” does not describe the importance or purpose of content inside the pane. In this context, primary indicates which pane the resize handle controls, while the secondary pane fills the remaining space.
Snap regions
When dragging, the resize handle will snap to the default size while in close proximity. Mouse users may double click the resize handle to return to the default size.
The primary pane enters a soft collapse state when dragged smaller than half the min size. The collapse state is committed when the drag handle is released.
Keyboard use allows 10 steps (ArrowLeft and ArrowRight) between the min and max size, with Home and End shortcuts respectively.
Props
Auto save
With the autoSaveId prop, provide a unique ID to auto-save the primary pane size via localStorage.
Default size
Use the defaultSize prop to set the default size of the primary pane, in pixels.
Min size
Use the minSize prop to set the minimum size of the primary pane, in pixels.
Max size
Use the maxSize prop to set the maximum size of the primary pane, in pixels.
Events
Resize
The onResize callback is called when the user resizes the primary pane. A resize event occurs when the user releases the drag handle, or is using the keyboard to resize.
200pxCollapse
A split view is considered collapsible if a boolean value is provided to the isCollapsed prop.
The onCollapseChange callback is called when the user collapses or expands the primary pane. A collapse event is triggered when the primary pane is dragged beyond half its minimum size, or the user presses the Enter key while the resize handle is focused.
Because we visually hide the resize handle (unless focused) to complete the collapsed appearance, an expand event will only occur when the user presses the Enter key on a collapsed resize handle—you must implement an alternative “expand” interaction for pointer users.