Skip to content

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

NameTypeDefaultNote
targetHookTarget-The target element for focus trap
active?booleantrueWhether focus trap is active

Returns

UseFocusTrapReturn

Parameters

NameTypeDefaultNote
active?booleantrueWhether 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 • Demo

Contributors ​

D
debabin
debabin

Released under the MIT License.