DOM & Events

useFocusTrap

Trap focus within a component for accessible modals and dialogs.

import { useFocusTrap } from "saha-ui"

Uses

Trap keyboard focus inside an element (dialog, modal) while active.

Props

NameTypeDescriptionDefault
activebooleanWhether the focus trap is active.true

Returns

NameDescription
refAttach this ref to the container to trap focus.

Example

const trapRef = useFocusTrap(isOpen); return <div ref={trapRef}>...</div>

Notes

Searches for focusable elements and handles Tab/Shift+Tab cycling; focuses first focusable item on mount.
Saha UI - The Modern React Component Library