Augments native scroll functionality for custom, cross-browser styling.

Import

import {ScrollArea} from '@fuegokit/react'

Additional styling guides and examples are coming soon. For now, explore the examples at Storybook.

Usage

<ScrollArea
  style={{width: '200px', height: '225px', borderRadius: 2, border: '1px solid', borderColor: 'border.default'}}
>
  <ScrollArea.Viewport>
    <div style={{padding: '16px 24px'}}>
      <div className="Text">Tags</div>
      {TAGS.map(tag => (
        <div className="Tag" key={tag}>
          {tag}

Props

ScrollArea

Contains all the parts of a scroll area.

Name	Type	Default	Description
asChild	boolean	false	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
type	'auto' \| 'always' \| 'scroll' \| 'hover'	'hover'	Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars. 'auto' means that scrollbars are visible when content is overflowing on the corresponding orientation. 'always' means that scrollbars are always visible regardless of whether the content is overflowing. 'scroll' means that scrollbars are visible when the user is scrolling along its corresponding orientation. 'hover' when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area.
scrollHideDelay	number	600	If type is set to either 'scroll' or 'hover', this prop determines the length of time, in milliseconds, before the scrollbars are hidden after the user stops interacting with scrollbars.
dir	'ltr' \| 'rtl'	-	The reading direction of the scroll area. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.

ScrollArea.Viewport

The viewport area of the scroll area.

Name	Type	Default	Description
asChild	boolean	false	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

ScrollArea.Scrollbar

The vertical scrollbar. Add a second Scrollbar with an orientation prop to enable horizontal scrolling.

Name	Type	Default	Description
asChild	boolean	false	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
forceMount	boolean	-	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
orientation	'horizontal' \| 'vertical'	-	The orientation of the scrollbar

Data attributes

Data attribute	Values
[data-state]
[data-orientation]

ScrollArea.Thumb

The thumb to be used in ScrollArea.Scrollbar.

Name	Type	Default	Description
asChild	boolean	false	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

Data attributes

Data attribute	Values
[data-state]

ScrollArea.Corner

The corner where both vertical and horizontal scrollbars meet.

Name	Type	Default	Description
asChild	boolean	false	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

Accessibility

Scrolling via keyboard is supported by default because the component relies on native scrolling. Specific keyboard interactions may differ between platforms, so we do not specify them here or add specific event listeners to handle scrolling via key events.