npm_versionnpm Paragon package page

A set of React components that encapsulates the logic from useOverflowScroll for building carousel-like UI components:

  • OverflowScroll
  • OverflowScroll.Items

Sample Usage

The following example demonstrates how to use OverflowScroll and OverflowScroll.Items to build carousel-like UI components.

Any Paragon component or export may be added to the code example.

Theme Variables (SCSS)#

$overflow-scroll-opacity-mask-transparent: var(--pgn-overflow-scroll-opacity-mask-transparent) !default;

Props API#

OverflowScroll Props API
  • ariaLabel string Required

    Text describing the OverflowScroll for screen readers

  • children node Required

    Specifies the content of the OverflowScroll.

  • childQuerySelector string

    A CSS query selector to find all child elements within the overflow container.

  • hasInteractiveChildren bool

    Whether the child OverflowScroll components are interactive/focusable. If not, a tabindex="0" is added to be a11y-compliant

  • disableScroll bool

    Whether users can scroll within the overflow container.

  • disableOpacityMasks bool

    Whether the default opacity masks should be shown at the start/end, if applicable.

  • onScrollPrevious func

    Callback function for when the user scrolls to the previous element.

  • onScrollNext func

    Callback function for when the user scrolls to the next element.

  • offset number | string

    A value specifying the distance the scroll should move.

  • offsetType enum'percentage' | 'fixed'

    Type of offset value (percentage or fixed).