Socket
Socket
Sign inDemoInstall

@zendeskgarden/container-scrollregion

Package Overview
Dependencies
11
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zendeskgarden/container-scrollregion

Containers relating to scroll region in the Garden Design System


Version published
Maintainers
1
Weekly downloads
4,793
decreased by-63%

Weekly downloads

Readme

Source

@zendeskgarden/container-scrollregion npm version

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

Keywords

FAQs

Last updated on 23 Jan 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc