Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @zendeskgarden/container-focusjail with all npm packages installed. Try it out:

require("prop-types/package.json"); // prop-types is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var containerFocusjail = require("@zendeskgarden/container-focusjail")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@zendeskgarden/container-focusjail v1.2.1

Containers relating to focusjail in the Garden Design System

@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>;
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free