Splitter API

API documentation for Splitter component

SplitterRoot#

Props#

Defines valid properties in Splitter component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SplitterRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SplitterRootInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SplitterRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SplitterRootInstance) => ReactNode)	null	The children to render.
orientation	"horizontal" \| "vertical"	horizontal	Orientation of the panels.
gutterSize	number	4	Size of the divider in pixels.
stateKey	string	null	Storage identifier of a stateful Splitter.
stateStorage	"local" \| "session"	session	Defines where a stateful splitter keeps its state, valid values are 'session' for sessionStorage and 'local' for localStorage.
step	number	5	Step factor to increment/decrement the size of the panels while pressing the arrow keys.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in Splitter component.

name	type	default	description
panels	ReactNode[]	null

Exposes#

Defines the methods and properties exposed by Splitter component.

name	type	default	description
state	useSplitterState	null	The state of the useSplitter.
registerPanel	() => number	null	Registers a new panel and returns its index.
registerGutter	() => number	null	Registers a new gutter and returns its index.
registerThumb	() => number	null	Registers a new thumb and returns its index.
panelCounter	RefObject<number>	null	Counter tracking the number of panels.
panelSizes	number[]	null	Array storing the size of each panel.
prevSize	number	null	Previous size of the panel during resize.
gutterRef	RefObject<HTMLDivElement>	null	Reference to the currently active gutter element.
gutterRefs	RefObject<HTMLDivElement[]>	null	References to all gutter elements.
onResizeStart	(event: MouseEvent<Element, MouseEvent> \| TouchEvent<Element> \| KeyboardEvent, index: number, isKeyDown: boolean) => void	null	Handler for resize start events.
onResize	(event: MouseEvent<Element, MouseEvent> \| TouchEvent<Element> \| KeyboardEvent, step: number, isKeyDown: boolean) => void	null	Handler for resize events.
onResizeEnd	() => void	null	Handler for resize end events.
onGutterMouseDown	(event: MouseEvent, index: number) => void	null	Handler for mouse down events on gutters.
onGutterTouchStart	(event: TouchEvent, index: number) => void	null	Handler for touch start events on gutters.
onGutterTouchMove	(event: TouchEvent) => void	null	Handler for touch move events on gutters.
onGutterTouchEnd	(event: TouchEvent) => void	null	Handler for touch end events on gutters.
onGutterKeyUp	() => void	null	Handler for key up events on gutters.
onGutterKeyDown	(event: KeyboardEvent, index: number) => void	null	Handler for key down events on gutters.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Splitter component.

name	type	default	description
root	SplitterRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
panel	SplitterRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the panel's DOM element.
gutter	SplitterRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the gutter's DOM element.
thumb	SplitterRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the thumb's DOM element.

Types#

Instance

Instance of Splitter component.

values
ComponentInstance<SplitterRootProps, SplitterRootState, SplitterRootExposes>

SplitterPanel#

Props#

Defines valid properties in SplitterPanel component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SplitterPanelInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SplitterPanelInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SplitterPanelPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SplitterPanelInstance) => ReactNode)	null	The children to render.
size	number	null	Size of the element relative to 100%.
minSize	number	null	Minimum size of the element relative to 100%.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by SplitterPanel component.

name	type	default	description
splitter	SplitterRootInstance	null	The Splitter component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SplitterPanel component.

name	type	default	description
root	SplitterPanelPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of SplitterPanel component.

values
ComponentInstance<SplitterPanelProps, SplitterPanelState, SplitterPanelExposes>

SplitterGutter#

Props#

Defines valid properties in SplitterGutter component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SplitterGutterInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SplitterGutterInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SplitterGutterPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SplitterGutterInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by SplitterGutter component.

name	type	default	description
splitter	SplitterRootInstance	null	The Splitter component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SplitterGutter component.

name	type	default	description
root	SplitterGutterPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of SplitterGutter component.

values
ComponentInstance<SplitterGutterProps, SplitterGutterState, SplitterGutterExposes>

SplitterThumb#

Props#

Defines valid properties in SplitterThumb component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SplitterThumbInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SplitterThumbInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SplitterThumbPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SplitterThumbInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by SplitterThumb component.

name	type	default	description
splitter	SplitterRootInstance	null	The Splitter component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SplitterThumb component.

name	type	default	description
root	SplitterThumbPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of SplitterThumb component.

values
ComponentInstance<SplitterThumbProps, SplitterThumbState, SplitterThumbExposes>

useSplitter#

Props#

Defines valid properties in useSplitter.

name	type	default	description
orientation	"horizontal" \| "vertical"	horizontal	Orientation of the panels.
gutterSize	number	4	Size of the divider in pixels.
stateKey	string	null	Storage identifier of a stateful Splitter.
stateStorage	"local" \| "session"	session	Defines where a stateful splitter keeps its state, valid values are 'session' for sessionStorage and 'local' for localStorage.
step	number	5	Step factor to increment/decrement the size of the panels while pressing the arrow keys.

State#

Defines valid state in useSplitter.

name	type	default	description
panels	ReactNode[]	null

Exposes#

Defines the methods and properties exposed by useSplitter.

name	type	default	description
state	useSplitterState	null	The state of the useSplitter.
registerPanel	() => number	null	Registers a new panel and returns its index.
registerGutter	() => number	null	Registers a new gutter and returns its index.
registerThumb	() => number	null	Registers a new thumb and returns its index.
panelCounter	RefObject<number>	null	Counter tracking the number of panels.
panelSizes	number[]	null	Array storing the size of each panel.
prevSize	number	null	Previous size of the panel during resize.
gutterRef	RefObject<HTMLDivElement>	null	Reference to the currently active gutter element.
gutterRefs	RefObject<HTMLDivElement[]>	null	References to all gutter elements.
onResizeStart	(event: MouseEvent<Element, MouseEvent> \| TouchEvent<Element> \| KeyboardEvent, index: number, isKeyDown: boolean) => void	null	Handler for resize start events.
onResize	(event: MouseEvent<Element, MouseEvent> \| TouchEvent<Element> \| KeyboardEvent, step: number, isKeyDown: boolean) => void	null	Handler for resize events.
onResizeEnd	() => void	null	Handler for resize end events.
onGutterMouseDown	(event: MouseEvent, index: number) => void	null	Handler for mouse down events on gutters.
onGutterTouchStart	(event: TouchEvent, index: number) => void	null	Handler for touch start events on gutters.
onGutterTouchMove	(event: TouchEvent) => void	null	Handler for touch move events on gutters.
onGutterTouchEnd	(event: TouchEvent) => void	null	Handler for touch end events on gutters.
onGutterKeyUp	() => void	null	Handler for key up events on gutters.
onGutterKeyDown	(event: KeyboardEvent, index: number) => void	null	Handler for key down events on gutters.

Events#

Types#

Instance

Instance of useSplitter headless.

values
HeadlessInstance<useSplitterProps, useSplitterState, useSplitterExposes>