# @valu/focus-trap

> Like [davidtheclark/focus-trap][] but can trap focus to multiple containers.

Latest version **0.0.14** (published 2022-01-28) · 0 weekly downloads

## Install

```sh
npm install @valu/focus-trap
pnpm add @valu/focus-trap
yarn add @valu/focus-trap
bun add @valu/focus-trap
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.14 |
| Published | 2022-01-28 |
| First published | 2019-10-16 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 83.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | saulirajala, valudigital, esamatti, joonasvaris |

## Links

- npm: https://www.npmjs.com/package/@valu/focus-trap
- npm.io page: https://npm.io/package/@valu/focus-trap

## Dependencies (1)

- [tabbable](https://npm.io/package/tabbable.md) ^4.0.0

## Recent versions

- 0.0.14 (latest) — 2022-01-28
- 0.0.13-dev.213ba2f19b (dev) — 2022-01-11
- 0.0.13 — 2021-04-27
- 0.0.12 — 2021-04-16
- 0.0.11 — 2020-05-19
- 0.0.10 — 2020-05-19
- 0.0.9 — 2020-05-19
- 0.0.8 — 2020-05-18
- 0.0.7 — 2020-05-18
- 0.0.6 — 2019-10-30
- 0.0.5 — 2019-10-16
- 0.0.4 — 2019-10-16
- 0.0.2 — 2019-10-16

## README

# Multi-Container Focus Trap

Like [davidtheclark/focus-trap][] but can trap focus to multiple containers.

[davidtheclark/focus-trap]: https://github.com/davidtheclark/focus-trap

## Features

-   Focus can move between different focus roots (containers)
-   Nested traps
-   Automatic deactivation by outside click or escape (optional)
-   Container can be itself be focusable element
-   Build-in types (written in TypeScript)

See demos here <http://valu-focus-trap.netlify.com>

## Installation

    npm install @valu/focus-trap

## Usage

```ts
import { FocusTrap } from "@valu/focus-trap";

const trap = new FocusTrap({
    containers: document.querySelectorAll(".container"),
});

trap.enable();

document.querySelector("button#disable").addEventListener(() => {
    trap.disable();
});
```

## Options

The `FocusTrap` constructor takes following options object

```ts
interface FocusTrapOptions {
    containers: HTMLElement | HTMLElement[] | NodeList | null | undefined;

    /**
     * Disable the trap when user click an element outside of the selected
     * containers
     */
    outsideClickDisables?: boolean;

    /**
     * Disable the trap when user hits escape key
     */
    escDisables?: boolean;

    /**
     * Options to control aspects of the focusing process
     */
    focusOptions?: FocusOptions;

    /**
     * Executed before trap enables
     */
    onBeforeEnable?(trap: FocusTrap): void;

    /**
     * Executed after the trap has been enabled
     */
    onBeforeDisable?(trap: FocusTrap): void;

    /**
     * Execute before the trap gets disabled
     */
    onAfterEnable?(trap: FocusTrap): void;

    /**
     * Executed after the trap has been disabled. By default the focus trap
     * restores focus to the element that had the focus before trap activation.
     * This hook can used to focus some other element manually.
     */
    onAfterDisable?(trap: FocusTrap): void;

    /**
     * Skip focusing given tabbable when returning false
     */
    validateTabbable?(
        tabbable: HTMLElement,
        container: HTMLElement,
        trap: FocusTrap,
    ): boolean;
}
```

---
_Source: https://npm.io/package/@valu/focus-trap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._