FocusLock
Lock focus to a particular element in the document.
Import
import { FocusLock } from '@hoverinc/design-system-react-web';
Usage
Trap focus to a specific portion of the document. This is useful for modals, popovers, and other floating elements that appear above the page's content.
import FocusLock from '@hoverinc/design-system-react-web';const JailForAFocus = ({ onClose }) => ( <FocusLock> You can not leave this form <button onClick={onClose} /> </FocusLock>);
API
Note
This is Chakra's wrapper around the react-focus-lock library. See the @chakra-ui/focus-lock package and react-focus-lock documentation for more information.
| Option | Type | Default | Description |
|---|---|---|---|
initialFocusRef | React.RefObject<FocusableElement> | - | ref of the element to receive focus initially |
finalFocusRef | React.RefObject<FocusableElement> | - | ref of the element to return focus to when FocusLock unmounts |
contentRef | React.RefObject<HTMLElement> | - | The ref of the wrapper for which the focus-lock wraps |
restoreFocus | boolean | false | If true, focus will be restored to the element that triggered the FocusLock once it unmounts |
children | React.ReactNode | - | The component to render |
isDisabled | boolean | false | If true, focus trapping will be disabled |
autoFocus | boolean | false | If true, the first focusable element within the children will auto-focused once FocusLock mounts |
persistentFocus | boolean | false | If true, disables text selections inside, and outside focus lock |
lockFocusAcrossFrames | boolean | false | Enables aggressive focus capturing within iframes |