Skip to content

React

A component and a hook, for Vite, Remix, Gatsby and any React 18 or 19 app.

On this page
Packageopen-accessibility-widget(opens in a new tab)Requires React 18+

Install

npm install open-accessibility-widget

Usage

import { AccessibilityWidget } from "open-accessibility-widget/react";

export default function App() {
  return (
    <>
      <YourApp />
      <AccessibilityWidget position="right" theme={{ primary: "#0f766e" }} />
    </>
  );
}

Notes

  • The component renders nothing itself: the widget mounts on body.
  • Changing a prop updates the running widget with setOptions(); unmounting the component removes it.
  • useAccessibility() returns the current settings, whether the panel is open, and the widget (null until it mounts).

Accessibility statement

Pass statementUrl to link your accessibility statement from the panel's footer.

Edit this page on GitHub