useFocusTrap hook purpose
The useFocusTrap hook traps focus at a given node, such as in a modal, drawer, or menu. The node must include at least one focusable element. When the node unmounts, the focus trap is automatically released.
hooks/focus-trap
9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
useFocusTrap basic usage example
import { useFocusTrap } from '@mantine/hooks'; function Demo() { const focusTrapRef = useFocusTrap(); return ( <div ref={focusTrapRef}> <input /> </div> ); }
useFocusTrap active state argument
The hook accepts focus trap active state as a single boolean argument. Calling useFocusTrap() with no argument makes the focus trap inactive. Passing true (useFocusTrap(true)) activates the focus trap. Passing false (useFocusTrap(false)) disables the focus trap.
useFocusTrap return value
The hook returns a ref that should be passed to the element where focus should be trapped. It can be used with regular HTML elements and Mantine components.
useFocusTrap with Mantine components
import { Paper } from '@mantine/core'; import { useFocusTrap } from '@mantine/hooks'; function Demo() { const focusTrapRef = useFocusTrap(); return ( <> {/* With regular element: */} <div ref={focusTrapRef} /> {/* With Mantine component: */} <Paper ref={focusTrapRef} /> </> ); }
useFocusTrap combined with useMergedRef
import { useRef } from 'react'; import { useClickOutside, useFocusTrap, useMergedRef, } from '@mantine/hooks'; function Demo() { const myRef = useRef(); const useClickOutsideRef = useClickOutside(() => {}); const focusTrapRef = useFocusTrap(); const mergedRef = useMergedRef( myRef, useClickOutsideRef, focusTrapRef ); return <div ref={mergedRef} />; }
useFocusTrap initial focus behavior
By default, the focus trap will move focus to the first interactive element. To specify a different element that should receive initial focus, add the data-autofocus attribute to that element.
useFocusTrap initial focus example
import { useFocusTrap } from '@mantine/hooks'; function Demo() { const focusTrapRef = useFocusTrap(); return ( <div ref={focusTrapRef}> <input /> {/* The second input in the modal will have initial focus */} <input data-autofocus /> <input /> </div> ); }
useFocusTrap type definition
function useFocusTrap(active?: boolean): React.RefCallback<HTMLElement | null>