@zendeskgarden/container-focusjail
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.9 • 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

    5,040

    Version

    1.4.9

    License

    Apache-2.0

    Unpacked Size

    35.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • zendesk-garden