accessify-widget-react
v0.1.0
Published
Accessify React component wrapper
Readme
accessify-widget-react
React component wrapper for Accessify-Widget -- a free, open-source accessibility widget.
Installation
npm install accessify-widget-reactUsage
React
import { AccessifyWidget } from 'accessify-widget-react';
function App() {
return (
<>
<h1>My Application</h1>
<AccessifyWidget
position="bottom-right"
theme="auto"
lang="en"
/>
</>
);
}Next.js (App Router)
Since the widget manipulates the DOM directly, use it as a client component:
'use client';
import { AccessifyWidget } from 'accessify-widget-react';
export default function A11yProvider() {
return (
<AccessifyWidget
position="bottom-right"
theme="auto"
/>
);
}Then include it in your root layout:
// app/layout.tsx
import A11yProvider from '@/components/A11yProvider';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<A11yProvider />
</body>
</html>
);
}Next.js (Pages Router)
// pages/_app.tsx
import { AccessifyWidget } from 'accessify-widget-react';
import type { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
<AccessifyWidget position="bottom-right" theme="auto" />
</>
);
}Props
| Prop | Type | Default | Description |
|-----------------|------------------------------------------------------------|-----------------|--------------------------------------------|
| position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | 'bottom-right' | Where the widget button appears |
| theme | 'auto' \| 'light' \| 'dark' | 'auto' | Color theme for the widget panel |
| lang | string | undefined | Language code (e.g., 'en', 'de') |
| openRouterKey | string | undefined | OpenRouter API key for AI-powered features |
| features | string[] | undefined | List of feature IDs to enable |
| zIndex | number | undefined | Custom z-index for the widget |
Framer
A Framer code component is included at src/FramerComponent.tsx. It exposes position, theme, language, and API key as Framer property controls for use in the Framer visual editor.
License
MIT