@vielzeug/focus

Framework-neutral focus navigation and restoration primitives.

Install

pnpm add @vielzeug/focus

Quick Start

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

const restore = captureFocus();

const listNavigation = createListNavigation({
  getItems: () => items,
  loop: true,
  onNavigate: ({ item }) => item.focus(),
});

listElement.addEventListener('keydown', listNavigation.handleKeydown);

restore();
listNavigation.dispose();

Full documentation