focus-trap-react demo
In the demos below, you'll be able to tell that a focus trap is active because it will turn pink. You should also be able to tell because it will trap your focus!
When a trap is active, you can deactivate it by pushing its deactivate button or, if the demo allows, pressing the Escape key.
Before you try the demos, if you're using macOS, make sure you have enabled keyboard navigation in order to use the Tab key to move focus between all controls.
In Ventura (v13), you'll find this under System Settings > Keyboard.
Prior to Ventura, it may have been under System Settings > General.
FireFox and Safari, for example, respect this setting and without it enabled, you won't get a good experience. Chrome appears to ignore it (at least in v109). While focus-trap will still trap all the right nodes, the browser/OS will not let you access all tabbable nodes on the page, nor in any traps you activate, while using the Tab key.
defaults
Default behavior: When this FocusTrap mounts (and activates), the first element in its tab order receives focus.
animated dialog
This focus trap will fade in when activated and fade out when deactivated. It logs a message to the console when the trap has finished activating. Note that the fade animation needs to be written yourself, it is not built into the library.
animated trigger
The activation button for this focus trap will fade out when the trap activates and fade in when the trap deactivates. It logs a message to the console when the trigger has received focus again. Note that the fade animation needs to be written yourself, it is not built into the library.
first focus, no escape
When this FocusTrap mounts (and activates), focus jumps to a specific, manually specified element.
Also, the Escape key does not deactivate this trap; you have to click the button to deactivate.
special element
Inspect this element and you'll see that it is not the default plain div,
but rather a section tag with an id, a class, inline styles, and an
arbitrary data-attribute.
Also, this FocusTrap activates and deactivates while staying mounted (and does so in React 18 Strict Mode, though the true effects of this are only applicable if you're running this demo locally in development mode since strict mode does not affect production code).
ALSO, when you click outside this FocusTrap, the trap deactivates and your click carries through.
Finally, focus should return to the "activate trap" button, whether you click the "deactivate trap" button, or press the ESC key.
demo autofocus
The trap contains an input with the autofocus attribute.
demo containerElements
You may pass in an array prop containerElements that contains nodes to trap focus within, which if passed will be used instead of the direct child. The direct child, if any, will be ignored by the trap (unless also given as an element in containerElements).
demo containerElements (no child)
Slight underlying difference from the previous "containerElements" demo in that the
focus trap element is not given a child: <FocusTrap containerElements={[...]} />.
The result is the same, but this further reinforces the fact that when containerElements is
used, the child is not considered, and therefore not even necessary.
demo setReturnFocus option applied
When this focus trap deactivates, it will send focus to the "Alternate Return Focus Element"
demo Iframe with document option applied
When integrated in an iframe, you may specify the document (of the said iframe) for the focusTrap to stay inside of it.
⚠️ NOTE: When the focusTrap is in an iframe (and so using a document other than the main/root document), focus will be trapped inside the iframe, but it will still be possible to interact with any element outside of it.
with shadow dom
This focus trap contains tabbable elements that are inside
open and closed Shadow DOMs. It configures tabbable to look for Shadow DOM
elements and provides a reference to the closed Shadow when requested.