npm

Need private packages and team management tools?Check out npm Orgs. »

@zendeskgarden/container-focusjail

1.1.3 • Public • Published

@zendeskgarden/container-focusjail npm version

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

Installation

npm install @zendeskgarden/container-focusjail

Usage

For live examples check out our storybook.

useFocusJail

The useFocusJail hook allows you to trap focus to a container element. Useful for modals and widgets. Garden uses this in react-components for the modals package.

import { useRef } from 'react';
import { useFocusJail } from '@zendeskgarden/container-focusjail';
 
const FocusJail = () => {
  const containerRef = useRef(null);
  const { getContainerProps } = useFocusJail({
    focusOnMount: false,
    environment: window.parent.document,
    containerRef
  });
 
  return (
    <>
      <input />
      <div {...getContainerProps({ ref: containerRef, tabIndex: -1 })}>
        <p>Focus is locked within the parent element</p>
        <input />
        <button>Focusable Items</button>
      </div>
    </>
  );
};

FocusJailContainer

FocusJailContainer is a render-prop wrapper for the useFocusJail hook.

import { createRef } from 'react';
import { FocusJailContainer } from '@zendeskgarden/container-focusjail';
 
const containerRef = createRef(null);
 
<FocusJailContainer
  containerRef={containerRef}
  focusOnMount={false}
  environment={window.parent.document}
>
  {({ getContainerProps }) => (
    <>
      <input />
      <div {...getContainerProps({ ref: containerRef, tabIndex: -1 })}>
        <p>Focus is locked within the parent element</p>
        <input />
        <button>Focusable Items</button>
      </div>
    </>
  )}
</FocusJailContainer>;

install

npm i @zendeskgarden/container-focusjail

Downloadsweekly downloads

93

version

1.1.3

license

Apache-2.0

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability