https://github.com/a11ywatch/react-a11ywatch-js
Headless components to use like authentication, account management, audits, payments, and etc for A11yWatch
https://github.com/a11ywatch/react-a11ywatch-js
a11ywatch
Last synced: 9 days ago
JSON representation
Headless components to use like authentication, account management, audits, payments, and etc for A11yWatch
- Host: GitHub
- URL: https://github.com/a11ywatch/react-a11ywatch-js
- Owner: a11ywatch
- License: mit
- Created: 2022-12-31T12:35:41.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-09T11:26:53.000Z (over 1 year ago)
- Last Synced: 2025-03-29T10:43:47.755Z (about 1 month ago)
- Topics: a11ywatch
- Language: TypeScript
- Homepage: https://a11ywatch.github.io/react-a11ywatch-js/?path=/story/paymentsplans--default
- Size: 2.74 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## @a11ywatch/react-a11ywatch-js
Unstyled React components and hooks to integrate with [A11yWatch](https://a11ywatch.com) using [tailwindcss](https://tailwindcss.com/).
Built with performant, native, customizable components, and hooks that can be used for any situation as in re-building custom accessibility solutions, special audit pages, external handling of A11yWatch and much more.
You need a [paid plan](https://a11ywatch.com/pricing) to use the API and components externally outside of [A11yWatch Lite](https://github.com/a11ywatch/a11ywatch).
## Getting Started
1. `npm install @a11ywatch/react-a11ywatch-js`
### Required Dependencies
If you plan on upgrading user accounts externally `@stripe/stripe-js` and `@stripe/react-stripe-js` is required.
1. `react`. ^16
1. optional: `@stripe/stripe-js`
1. optional: `@stripe/react-stripe-js`.
This package handles the above as peers and require installation manually.
## Usage
First wrap the section of the app that needs to use A11yWatch with the [A11yWatchProvider](./src/providers/app.tsx).
The `persist` prop stores user data to disk if set to true.
```tsx
import { A11yWatchProvider, setAPIURL } from "@a11ywatch/react-a11ywatch-js";
// optional: set apiURL - you can also use the env.NEXT_PUBLIC_A11YWATCH_API or window.NEXT_PUBLIC_A11YWATCH_API
setAPIURL("http://localhost:3280");
export default function Home() {
return (
);
}
```
Now inside the `App` component you can use the hooks.
```tsx
import { useA11yWatchContext } from "@a11ywatch/react-a11ywatch-js";
export default function App() {
const { account } = useA11yWatchContext();
return
Email {account.email};
}
```
Use the SignOnForm component to authenticate.
```tsx
import { useA11yWatchContext, SignOnForm } from "@a11ywatch/react-a11ywatch-js";
export default function App() {
const { account } = useA11yWatchContext();
return (
Welcome {account.email ? account.email : null}
);
}
```
Select a payment plan to prep account upgrade first add the [PaymentsProvider](./src/providers/payments.tsx).
```tsx
import { PaymentsProvider } from "@a11ywatch/react-a11ywatch-js/providers/payments";
export default function Payments() {
return (
);
}
```
```tsx
import { usePaymentsContext } from "@a11ywatch/react-a11ywatch-js/providers/payments";
import { PaymentPlans } from "@a11ywatch/react-a11ywatch-js/components/payment-plans";
export default function PaymentsView() {
const { payments } = usePaymentsContext();
console.log(payments);
return ;
}
```
Use the selected payment plan to change account plan.
```tsx
import { usePaymentsContext } from "@a11ywatch/react-a11ywatch-js/providers/payments";
import { StripeProvider } from "@a11ywatch/react-a11ywatch-js/providers/stripe";
import { CheckoutForm } from "@a11ywatch/react-a11ywatch-js/components/stripe/checkout";
export default function PaymentsView() {
const { payments } = usePaymentsContext();
console.log(payments);
return (
);
}
```
Full example managing account subscriptions and auth.
```tsx
import React, { useEffect } from "react";
import {
A11yWatchProvider,
SignOnForm,
useA11yWatchContext,
} from "@a11ywatch/react-a11ywatch-js";
import { StripeProvider } from "@a11ywatch/react-a11ywatch-js/providers/stripe";
import { CheckoutForm } from "@a11ywatch/react-a11ywatch-js/components/stripe/checkout";
import { PaymentPlans } from "@a11ywatch/react-a11ywatch-js/components/payment-plans";
import { PaymentsProvider } from "@a11ywatch/react-a11ywatch-js/providers/payments";
// build a payment view based on the components.
const PaymentsView = () => {
const { account } = useA11yWatchContext();
useEffect(() => {
// do something with account on change
console.log(account);
}, [account]);
return (
Welcome {account.email}
);
};
const MainApp = () => {
const { account } = useA11yWatchContext();
return account.authed ? (
) : (
);
};
// wrap in auth provider
export function App() {
return (
);
}
```
Perform a live audit scan on a url, make sure to be authenticated first.
```tsx
import React, { useEffect } from "react";
import {
A11yWatchProvider,
AuditProvider,
AuditForm,
AuditList,
useAuditContext,
} from "@a11ywatch/react-a11ywatch-js";
function MyAudit() {
const { report, loading } = useAuditContext();
console.log(report, loading);
return (
<>
>
);
}
export function Auditer() {
return (
);
}
```
Multiple audits example with persisting to disk:
```tsx
import React from "react";
import {
A11yWatchProvider,
AuditProvider,
AuditForm,
AuditList,
} from "@a11ywatch/react-a11ywatch-js";
export function Auditer() {
return (
);
}
```
Multi page audits with the `multi` prop:
```tsx
import React from "react";
import {
A11yWatchProvider,
AuditProvider,
AuditForm,
AuditList,
} from "@a11ywatch/react-a11ywatch-js";
export function Auditer() {
return (
);
}
```
Use pre-compilled tailwind styles:
```tsx
import "@a11ywatch/react-a11ywatch-js/css/tailwind.css";
```
### Hooks
You can also use the hooks without the UI to perform all events and actions.
```tsx
import React from "react";
import {
A11yWatchProvider,
AuditProvider,
AuditForm,
AuditList,
streamAudit,
useA11yWatchContext,
useEffect,
Report
} from "@a11ywatch/react-a11ywatch-js";
const AutoAudit = () => {
const { account } = useA11yWatchContext();
const { dispatchReport } = useAuditContext();
// auto crawl on mount
useEffect(() => {
const cb = (report) => {
// do something with report prior or after
dispatchReport(report) // bind state updates manually
}
// custom native fetch streaming response
streamAudit({{ url: "https://a11ywatch.com", cb }, account.jwt}) // second param JWT to use for request
}, [])
return null;
}
export function Auditer() {
return (
);
}
```
Todo.. more examples.
## Config
You can add the `persist` prop to providers for storing to disk and retrieval.
## ENV
You can use the `NEXT_PUBLIC_A11YWATCH_API` env var to set the base url of the API ex: `http://localhost:3280`.
## Storybook
The [live example](a11ywatch.github.io/react-a11ywatch-js/?path=/story/paymentsplans--default) website you may need to use the [sign on form](https://a11ywatch.github.io/react-a11ywatch-js/?path=/story/signonform--default) first before using the other components. The sign on and register runs on production with real account information.
Once you login or register you can the other components that require authentication.
## Development
node v14 - v18.
To get started developing run `yarn` to install the modules and `yarn storybook` to start the instance locally.
## Extra Info
The payments and stripe portions need direct imports since we want to make those portions optional for the bundle.
## LICENSE
check the license file in the root of the project.