Package Exports

@zendeskgarden/container-scrollregion

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@zendeskgarden/container-scrollregion) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@zendeskgarden/container-scrollregion

This package includes containers relating to scroll region in the Garden Design System.

Installation

npm install @zendeskgarden/container-scrollregion

Usage

For live examples check out storybook.

A scroll region is an area of the web page that contains scrollable content. The scroll region hook allows keyboard users to focus and scroll a scroll region.

A scroll region with a dynamic layout should use the dependency option. The hook re-calculates the tab-index when the dependency value changes. If there are multiple dependency values, a memoized object can be used as the dependency value. There is a Storybook demo that shows an example of this scenario.

As a Render Prop Component

import { ScrollRegionContainer } from '@zendeskgarden/container-scrollregion';

const ScrollRegion = () => {
  const containerRef = useRef();

  return (
    <ScrollRegionContainer containerRef={containerRef}>
      {containerTabIndex => (
        <div ref={containerRef} tabIndex={containerTabIndex}>
          <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea.</p>
        </div>
      )}
    </ScrollRegionContainer>;
  )
}

As a hook

import { useScrollRegion } from '@zendeskgarden/container-scrollregion';

const ScrollRegion = () => {
  const containerRef = useRef();
  const containerTabIndex = useScrollRegion({ containerRef });

  return (
    <div ref={containerRef} tabIndex={containerTabIndex}>
      <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea.</p>
    </div>
  );
};