useFocusTrap

Hook that traps focus within a given element

elements

medium

test coverage

Last changed: last month

Installation

Library

CLI

Manual

import { useFocusTrap } from '@siberiacancode/reactuse';

Usage

const { active, disable, toggle, enable } = useFocusTrap(ref, true);
// or
const { ref, active, disable, toggle, enable } = useFocusTrap(true);

Demo

source

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

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