Framework Integration

Install OpenKeyNav with the package manager already used by the project. The examples below initialize one instance at the persistent application root, after the browser DOM is available.

npm install openkeynav

React and Next.js

Render this initializer once near the application root. The effect cleanup supports React Strict Mode's development lifecycle and removes OpenKeyNav if that root unmounts.

OpenKeyNavInitializer.jsx

'use client'; // Omit in a client-only React app

import {useEffect} from 'react';
import OpenKeyNav from 'openkeynav';

export default function OpenKeyNavInitializer() {
  useEffect(() => {
    const openKeyNav = new OpenKeyNav().init();
    return () => {
      openKeyNav.destroy();
    };
  }, []);

  return null;
}

For the Next.js App Router, 'use client' marks this as a Client Component. Add <OpenKeyNavInitializer /> to the root layout's rendered tree.

Vue and Nuxt

Put this in the persistent root App.vue or Nuxt app.vue. onMounted initializes OpenKeyNav in the browser after the component DOM is ready, and onUnmounted cleans up if that root is replaced.

App.vue or app.vue

<script setup>
import {onMounted, onUnmounted} from 'vue';
import OpenKeyNav from 'openkeynav';

let openKeyNav;

onMounted(() => {
  openKeyNav = new OpenKeyNav().init();
});

onUnmounted(() => {
  openKeyNav?.destroy();
});
</script>

Svelte and SvelteKit

Put this in the root App.svelte or SvelteKit +layout.svelte. onMount initializes OpenKeyNav during the browser lifecycle and returns its cleanup.

App.svelte or +layout.svelte

<script>
  import {onMount} from 'svelte';
  import OpenKeyNav from 'openkeynav';

  onMount(() => {
    const openKeyNav = new OpenKeyNav().init();
    return () => {
      openKeyNav.destroy();
    };
  });
</script>

Angular

Initialize from the root component with afterNextRender, which schedules OpenKeyNav after the browser renders the DOM.

app.component.ts

import {afterNextRender, Component, DestroyRef, inject} from '@angular/core';
import OpenKeyNav from 'openkeynav';

@Component({
  selector: 'app-root',
  template: '<router-outlet />',
})
export class AppComponent {
  private readonly destroyRef = inject(DestroyRef);
  private openKeyNav?: OpenKeyNav;

  constructor() {
    afterNextRender(() => {
      this.openKeyNav = new OpenKeyNav().init();
    });

    this.destroyRef.onDestroy(() => this.openKeyNav?.destroy());
  }
}

TypeScript declaration

Strict TypeScript projects can use this local declaration with the current npm package:

types/openkeynav.d.ts

declare module 'openkeynav' {
  export default class OpenKeyNav {
    init(options?: Record<string, unknown>): this;
    disable(): this;
    destroy(): this;
  }
}

Application lifecycle

Keep one instance at the persistent application root and share it across client-side routes. Call destroy() when that root unmounts so OpenKeyNav removes its document listeners, overlays, movement attributes, and styles. Use disable() when the application intentionally changes the user's enabled state.