ScrollArea API

API documentation for ScrollArea component

ScrollAreaRoot#

Props#

Defines valid properties in ScrollArea 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?: ScrollAreaRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ScrollAreaRootInstance) => 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<ScrollAreaRootPassThrough>	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: ScrollAreaRootInstance) => ReactNode)	null	The children to render.
step	number	5	Step factor to scroll the content 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 ScrollArea component.

name	type	default	description
orientationState	string	null	Current orientation of scrolling, either "vertical" or "horizontal".

Exposes#

Defines the methods and properties exposed by ScrollArea component.

name	type	default	description
state	useScrollAreaState	null	The state of the useScrollArea.
contentRef	RefObject<HTMLDivElement>	null	Reference to the scroll content element.
thumbXRef	RefObject<HTMLDivElement>	null	Reference to the horizontal scrollbar thumb element.
thumbYRef	RefObject<HTMLDivElement>	null	Reference to the vertical scrollbar thumb element.
lastScrollLeft	number	null	Current horizontal scroll position.
lastScrollTop	number	null	Current vertical scroll position.
onScroll	(event: UIEvent<HTMLDivElement>) => void	null	Event handler for content scrolling to update thumb positions.
onXBarMouseDown	(event: MouseEvent<HTMLDivElement>) => void	null	Event handler for horizontal scrollbar thumb drag interactions.
onYBarMouseDown	(event: MouseEvent<HTMLDivElement>) => void	null	Event handler for vertical scrollbar thumb drag interactions.
onFocus	(event: FocusEvent<HTMLDivElement>) => void	null	Event handler when the scrollbar thumb receives focus.
onBlur	() => void	null	Event handler when the scrollbar thumb loses focus.
onKeyDown	(event: KeyboardEvent<HTMLDivElement>) => void	null	Event handler for keyboard navigation to scroll content.
onKeyUp	() => void	null	Event handler to stop continuous scrolling when key is released.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ScrollArea component.

name	type	default	description
root	ScrollAreaRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
viewport	ScrollAreaRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the viewport's DOM element.
content	ScrollAreaRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the content's DOM element.
thumbY	ScrollAreaRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the thumbY's DOM element.
thumbX	ScrollAreaRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the thumbX's DOM element.

Types#

Instance

Instance of ScrollArea component.

values
ComponentInstance<ScrollAreaRootProps, ScrollAreaRootState, ScrollAreaRootExposes>

ScrollAreaViewport#

Props#

Defines valid properties in ScrollAreaViewport 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?: ScrollAreaViewportInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ScrollAreaViewportInstance) => 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<ScrollAreaViewportPassThrough>	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: ScrollAreaViewportInstance) => 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 ScrollAreaViewport component.

name	type	default	description
scrollarea	ScrollAreaRootInstance	null	Instance of the ScrollArea component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ScrollAreaViewport component.

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

Types#

Instance

Instance of ScrollAreaViewport component.

values
ComponentInstance<ScrollAreaViewportProps, ScrollAreaViewportState, ScrollAreaViewportExposes>

ScrollAreaContent#

Props#

Defines valid properties in ScrollAreaContent 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?: ScrollAreaContentInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ScrollAreaContentInstance) => 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<ScrollAreaContentPassThrough>	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: ScrollAreaContentInstance) => 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 ScrollAreaContent component.

name	type	default	description
scrollarea	ScrollAreaRootInstance	null	Instance of the ScrollArea component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ScrollAreaContent component.

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

Types#

Instance

Instance of ScrollAreaContent component.

values
ComponentInstance<ScrollAreaContentProps, ScrollAreaContentState, ScrollAreaContentExposes>

ScrollAreaThumbY#

Props#

Defines valid properties in ScrollAreaThumbY 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?: ScrollAreaThumbYInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ScrollAreaThumbYInstance) => 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<ScrollAreaThumbYPassThrough>	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: ScrollAreaThumbYInstance) => 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 ScrollAreaThumbY component.

name	type	default	description
scrollarea	ScrollAreaRootInstance	null	Instance of the ScrollArea component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ScrollAreaThumbY component.

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

Types#

Instance

Instance of ScrollAreaThumbY component.

values
ComponentInstance<ScrollAreaThumbYProps, ScrollAreaThumbYState, ScrollAreaThumbYExposes>

ScrollAreaThumbX#

Props#

Defines valid properties in ScrollAreaThumbX 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?: ScrollAreaThumbXInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ScrollAreaThumbXInstance) => 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<ScrollAreaThumbXPassThrough>	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: ScrollAreaThumbXInstance) => 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 ScrollAreaThumbX component.

name	type	default	description
scrollarea	ScrollAreaRootInstance	null	Instance of the ScrollArea component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ScrollAreaThumbX component.

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

Types#

Instance

Instance of ScrollAreaThumbX component.

values
ComponentInstance<ScrollAreaThumbXProps, ScrollAreaThumbXState, ScrollAreaThumbXExposes>

useScrollArea#

Props#

Defines valid properties in useScrollArea.

name	type	default	description
step	number	5	Step factor to scroll the content while pressing the arrow keys.

State#

Defines valid state in useScrollArea.

name	type	default	description
orientationState	string	null	Current orientation of scrolling, either "vertical" or "horizontal".

Exposes#

Defines the methods and properties exposed by useScrollArea.

name	type	default	description
state	useScrollAreaState	null	The state of the useScrollArea.
contentRef	RefObject<HTMLDivElement>	null	Reference to the scroll content element.
thumbXRef	RefObject<HTMLDivElement>	null	Reference to the horizontal scrollbar thumb element.
thumbYRef	RefObject<HTMLDivElement>	null	Reference to the vertical scrollbar thumb element.
lastScrollLeft	number	null	Current horizontal scroll position.
lastScrollTop	number	null	Current vertical scroll position.
onScroll	(event: UIEvent<HTMLDivElement>) => void	null	Event handler for content scrolling to update thumb positions.
onXBarMouseDown	(event: MouseEvent<HTMLDivElement>) => void	null	Event handler for horizontal scrollbar thumb drag interactions.
onYBarMouseDown	(event: MouseEvent<HTMLDivElement>) => void	null	Event handler for vertical scrollbar thumb drag interactions.
onFocus	(event: FocusEvent<HTMLDivElement>) => void	null	Event handler when the scrollbar thumb receives focus.
onBlur	() => void	null	Event handler when the scrollbar thumb loses focus.
onKeyDown	(event: KeyboardEvent<HTMLDivElement>) => void	null	Event handler for keyboard navigation to scroll content.
onKeyUp	() => void	null	Event handler to stop continuous scrolling when key is released.

Types#

Instance

Instance of useScrollArea headless.

values
HeadlessInstance<useScrollAreaProps, useScrollAreaState, useScrollAreaExposes>