Accessibility widget installation – React

Integrating the Accessibility Widget into React projects.
The following instructions describe installation, configuration, and basic use.
A detailed description of the methods can be found in the base package documentation.

1. Installing the package

Using NPM:

npm install @dockcodes/accessibility-widget-react

or Yarn:

yarn add @dockcodes/accessibility-widget-react

2. Basic use

To use a widget in React, wrap your app in the <AccessibilityProvider> component.
Then use the useAccessibility() hook to access the widget instance and its status.

import React, { useEffect } from "react"
import { AccessibilityProvider, useAccessibility } from "@dockcodes/accessibility-widget-react"

const Demo = () => {
    const { accessibility, ready } = useAccessibility()

    useEffect(() => {
        if (!ready) return
        accessibility.onMenuOpen(() => console.log('Menu opened!'))
    }, [ready])

    if (!ready) return <p>Widget loading…</p>

    return (
        <div style={{ padding: 20 }}>
            <h1>Demo Accessibility Widget</h1>

            <button onClick={() => accessibility.setContrast(true)}>Enable contrast</button>
            <button onClick={() => accessibility.toggleInvertColors()}>Invert colors</button>
            <button onClick={() => accessibility.setFontSize(4)}>Large font</button>
            <button onClick={() => accessibility.setLanguage("en")}>EN</button>
            <button onClick={() => accessibility.resetAll()}>Reset</button>
        </div>
    )
}

export default function App() {
    return (
        <AccessibilityProvider token="YOUR_TOKEN">
            <Demo />
        </AccessibilityProvider>
    )
}

Hook use Accessibility() returns two key elements:

• accessibility – widget instance (full list of methods in the base package)
• ready – information whether the widget has been loaded correctly

3. Base package documentation

All widget methods, events, configuration and API are available in the main package documentation:
👉 @dockcodes/accessibility-widget

🔑 Get a free token

The widget requires a token that you generate for free in the panel:
👉 https://wcag.dock.codes/my-account/tokens/

🤝 Contributing

Contributions are welcome! If you find a bug or want to improve the library, please open an issue or pull request on: 👉 GitHub