React

@generative-a11y/react

A React provider and hooks for browser updates, attention, preferences, and refs for your existing interface.

GenerativeA11yProvider

GenerativeA11yProvider can own a runtime or borrow one from your app. It renders stable hidden delivery regions and leaves visible UI unchanged.

tsx

import { GenerativeA11yProvider } from "@generative-a11y/react";

export function App() {
  return (
    <GenerativeA11yProvider
      preset="balanced"
      dom={{ mode: "auto" }}
    >
      <ExistingChat />
    </GenerativeA11yProvider>
  );
}

How this code works

01
Mount one provider
Wrap the part of your app that sends accessibility events.
02
Configure browser delivery
dom controls hidden screen-reader updates without replacing visible components.
03
Keep app behavior in the app
ExistingChat still owns its HTML, keyboard behavior, and focus.

Options and return values

runtimeGenerativeA11yRuntimeOptional

Borrows an existing runtime when provided. GenerativeA11yProvider never disposes app-supplied runtimes.

Default: owned runtime

domfalse | GenerativeA11yDOMOptionsOptional

Configures hidden DOM delivery or disables it.

Default: {}

attentionfalse | AttentionStoreOptionsOptional

Configures the provider's attention store or disables browser signal collection.

Default: {}

attentionStoreAttentionStoreOptional

Borrows an application-supplied attention store.

Default: owned store

preferencesPreferenceStoreOptionsOptional

Configures an owned preference store.

Default: {}

preferenceStorePreferenceStoreOptional

Borrows an application-supplied preference store.

Default: owned store

Provider ownership

GenerativeA11yProvider cleans up every runtime, browser connection, store, timer, subscription, and live region it creates. Anything supplied by your app remains under your control.

Provider context is unavailable outside the provider.
Server rendering uses stable hidden structure and reports attention as unknown.
Routine announcements never move focus.
Preference changes update the runtime without replacing your components.