2.0.19 • Published 3 months ago

@zendeskgarden/container-focusjail v2.0.19

Weekly downloads
12,782
License
Apache-2.0
Repository
-
Last release
3 months ago

@zendeskgarden/container-focusjail npm version

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

Installation

npm install @zendeskgarden/container-focusjail

Usage

This container implements the dialog focus loop design pattern and can be used to build a modal component. Check out storybook for live examples.

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>;
2.0.19

3 months ago

2.0.18

4 months ago

2.0.17

4 months ago

2.0.16

6 months ago

2.0.15

11 months ago

2.0.14

11 months ago

2.0.13

11 months ago

2.0.11

1 year ago

2.0.7

1 year ago

2.0.12

1 year ago

2.0.9

1 year ago

2.0.10

1 year ago

2.0.8

1 year ago

2.0.6

2 years ago

2.0.5

2 years ago

2.0.4

2 years ago

2.0.2

2 years ago

2.0.1

2 years ago

2.0.0

3 years ago

1.4.11

3 years ago

1.4.13

3 years ago

1.4.12

3 years ago

1.4.10

3 years ago

1.4.9

3 years ago

1.4.7

3 years ago

1.4.6

4 years ago

1.4.5

4 years ago

1.4.4

4 years ago

1.4.3

5 years ago

1.4.2

5 years ago

1.4.1

5 years ago

1.4.0

5 years ago

1.3.2

5 years ago

1.3.1

5 years ago

1.3.0

5 years ago

1.2.4

5 years ago

1.2.3

5 years ago

1.2.2

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.1.5

5 years ago

1.1.4

5 years ago

1.1.3

5 years ago

1.1.2

5 years ago

1.1.1

5 years ago

1.1.0

6 years ago

1.0.0

6 years ago

0.1.0

6 years ago