Package Exports

@zendeskgarden/container-scrollregion
@zendeskgarden/container-scrollregion/dist/index.cjs.js
@zendeskgarden/container-scrollregion/dist/index.esm.js

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

Check out storybook for live examples.

As a hook

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 the 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.

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>
  );
};

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>;
  )
}