Get started

Install

Loock is published to the NPM registry

npm

npm install @chialab/loock

yarn

yarn add @chialab/loock

pnpm

pnpm add @chialab/loock

or use a CDN

You can use DNA via CDN thanks to unpkg:

import { focusTrapBehavior } from 'https://unpkg.com/@chialab/loock?module';

Usage

Loock provides a set of utilities and behaviors to manage focus and keyboard navigation:

• focusManager: manage focusable objects inside a context
• focusTrapBehavior: trap focus inside a context
• focusEnterBehavior: handle focus entering or exiting a context
• focusFirstChildBehavior: focus the first element when entering a context
• keyboardNavigationBehavior: navigate inside a context using keyboard arrows

In the example below, we create a focus trap for a dialog element.

import { focusTrapBehavior } from '@chialab/loock';

const dialog = document.getElementById('.dialog');
const trap = focusTrapBehavior(dialog, {
    inert: true,
});

dialog.addEventListener('open', () => {
    trap.connect();
});