Jak zainstalować widżet dostępności w React

Integracja widgetu dostępności w projektach React. Poniższa instrukcja opisuje instalację, konfigurację oraz podstawowe użycie. Szczegółowy opis metod znajduje się w dokumentacji paczki bazowej.

---

1. Instalacja paczki

Za pomocą NPM:

npm install @dockcodes/accessibility-widget-react
Skopiuj tekst

lub Yarn:

yarn add @dockcodes/accessibility-widget-react
Skopiuj tekst

---

2. Podstawowe użycie

Aby korzystać z widgetu w React, owiń swoją aplikację komponentem <AccessibilityProvider>. Następnie użyj hooka useAccessibility(), aby uzyskać dostęp do instancji widgetu i jego statusu.

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>
    )
}
Skopiuj tekst

Hook useAccessibility() zwraca dwa kluczowe elementy:

• accessibility – instancja widgetu (pełna lista metod w paczce ogólnej)
• ready – informacja czy widget został poprawnie załadowany

---

3. Dokumentacja paczki bazowej

Wszystkie metody widgetu, zdarzenia, konfiguracja i API dostępne są w dokumentacji paczki głównej: 👉 @dockcodes/accessibility-widget (otwiera nową kartę)

---

🔑 Pobierz darmowy token

Widget wymaga tokenu, który generujesz bezpłatnie w panelu: 👉 https://wcag.dock.codes/pl/moje-konto/tokens/ (otwiera nową kartę)

---

🤝 Współtworzenie

Jeśli chcesz zgłosić błąd, zaproponować poprawkę lub nową funkcję, zapraszamy do zgłaszania issue lub PR: 👉 GitHub (otwiera nową kartę)