ScrollArea

import { ScrollArea } from '@semcore/ui/base-components';
<ScrollArea />;

ScrollAreaProps

& {...}

Name	Type	Description
shadow	boolean	Shadow display on container
orientation	"horizontal" | "vertical"	Scroll direction
container		Link to the dom element, which will be a container with overflow
inner		Link to the dom element that will be stretched along with the content
onResize		Callback executed when container change size
onScroll	(event: React.SyntheticEvent<>) => void	Called every time user scrolls area
tabIndex	number | null	Tab index that is being bypassed to the scroll container.
forcedAdvancedMode	boolean	Deprecated
observeParentSize	boolean	Flag to enable resizing if the parent of ScrollArea is resized
disableAutofocusToContent	boolean	Flag to disable autoscroll to focused content.
topOffset	number	Top offset for scroll positioning
rightOffset	number	Right offset for scroll positioning
bottomOffset	number	Bottom offset for scroll positioning
leftOffset	number	Left offset for scroll positioning
shadowSize	number | {horizontal: number; vertical: number }	Size for shadows in px.
shadowTheme	| {horizontalTop?: ; horizontalBottom?: ; verticalLeft?: ; verticalRight?: }	Style for shadows (black or white).

ScrollArea.Container

This is a wrap over the content to calculate its size. It takes all properties of Box.

import { ScrollArea } from '@semcore/ui/base-components';
<ScrollArea.Container />;

ScrollArea.Bar

import { ScrollArea } from '@semcore/ui/base-components';
<ScrollArea.Bar />;

ScrollBarProps

& {...}

Name	Type	Description
orientation	"horizontal" | "vertical"	The direction of the scroll that can be calculated automatically
container	React.RefObject<>	Reference to the scrollable container element

ScrollArea.Bar.Slider

Stylized div. It takes all properties of Box.

import { ScrollArea } from '@semcore/ui/base-components';
<ScrollArea.Bar.Slider />;