https://github.com/compulim/use-read-alert
https://github.com/compulim/use-read-alert
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/compulim/use-read-alert
- Owner: compulim
- License: mit
- Created: 2023-01-25T06:16:29.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-20T05:37:53.000Z (about 3 years ago)
- Last Synced: 2025-07-27T16:52:11.561Z (about 1 year ago)
- Language: JavaScript
- Size: 518 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# `use-read-alert`
A callback hook to read assertive alert by the screen reader.
## Background
## How to use
Installs the provider component. The provider component is required to use the `useReadAlert` hook.
```tsx
import { UseReadAlertProvider } from 'use-read-alert';
React.createRoot(document.getElementById('root')).render(
);
```
Then, in your React component, calls the callback function to read the alert message.
```tsx
import { useReadAlert } from 'use-read-alert';
const MyComponent = () => {
const readAlert = useReadAlert();
readAlert('Hello, World!');
// ...
};
```
## API
```ts
function UseReadAlertProvider(PropsWithChildren<{
alertClassName?: string;
}>);
function useReadAlert(): (message: string) => void;
```
By default, the `alert` role will be hidden using CSS. If you prefer to hide it using your own CSS, you can provide an `alertClassName`.
## Behaviors
## Contributions
Like us? [Star](https://github.com/compulim/use-read-alert/stargazers) us.
Want to make it better? [File](https://github.com/compulim/use-read-alert/issues) us an issue.
Don't like something you see? [Submit](https://github.com/compulim/use-read-alert/pulls) a pull request.