useFocusTrap ​
Hook that traps focus within a given element
elements
medium
test coverage
Last changed: 15 hours ago
Installation ​
Library
CLI
Manual
typescript
import { useFocusTrap } from '@siberiacancode/reactuse';
Usage ​
typescript
const { active, disable, toggle, enable } = useFocusTrap(ref, true);
// or
const { ref, active, disable, toggle, enable } = useFocusTrap(true);
Demo ​
Api ​
Parameters
Name | Type | Default | Note |
---|---|---|---|
target | HookTarget | - | The target element for focus trap |
active? | boolean | true | Whether focus trap is active |
Returns
UseFocusTrapReturn
Parameters
Name | Type | Default | Note |
---|---|---|---|
active? | boolean | true | Whether focus trap is active |
Returns
UseFocusTrapReturn & { ref: StateRef<Target> }
Type declaration ​
typescript
import type { HookTarget } from '@/utils/helpers';
import type { StateRef } from '../useRefState/useRefState';
export interface UseFocusTrapReturn {
/** Whether focus trap is active */
active: boolean;
/** Disable focus trap */
disable: () => void;
/** Enable focus trap */
enable: () => void;
/** Toggle focus trap */
toggle: () => void;
}
export interface UseFocusTrap {
(target: HookTarget, active?: boolean): UseFocusTrapReturn;
<Target extends HTMLElement>(
active?: boolean,
target?: never
): UseFocusTrapReturn & {
ref: StateRef<Target>;
};
}
Source ​
Source • DemoContributors ​
D