@vielzeug/focus

Framework-neutral list navigation and focus restoration primitives

Installation

pnpm add @vielzeug/focus
npm install @vielzeug/focus
yarn add @vielzeug/focus

Quick Start

import { captureFocus, createListNavigation } from '@vielzeug/focus';

const restore = captureFocus();
const navigation = createListNavigation({
  getItems: () => items,
  loop: true,
});
const onKeydown = (event: KeyboardEvent) => {
  navigation.handleKeydown(event)?.change?.item.focus();
};

listElement.addEventListener('keydown', onKeydown);

restore();
listElement.removeEventListener('keydown', onKeydown);

Documentation

• Overview
• Usage Guide
• API Reference
• Examples
• Migration Guide

License

MIT © Helmuth Saatkamp: part of the Vielzeug monorepo.