@zendeskgarden/container-focusjail v2.0.19
@zendeskgarden/container-focusjail
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>;
3 months ago
4 months ago
4 months ago
6 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago