use-focus-trap traps focus at given node, for example in modal, drawer or menu. Node must include at least one focusable element. When node unmounts, focus trap is automatically disabled.
Hook accepts focus trap active state as single argument:
ref that should be passed to dom node:
Usually focus trap is not used alone. To combine use-focus-trap hook with other ref based hooks use use-merged-ref hook:
By default, focus trap will move focus to first interactive element.
To specify element that should receive initial focus add
note that focus trap works with dom and this attribute should be added to element:
Modal example – when modal is opened focus is trapped inside:
Menu example – when menu is opened focus is trapped inside and Tab key is disabled: