https://github.com/blvdmitry/react-awesome-toasts
Toast notifications for react.
https://github.com/blvdmitry/react-awesome-toasts
List: react-awesome-toasts
a11y accessibility component notifications react reactjs toast typescript
Last synced: 7 months ago
JSON representation
Toast notifications for react.
- Host: GitHub
- URL: https://github.com/blvdmitry/react-awesome-toasts
- Owner: blvdmitry
- License: mit
- Created: 2018-11-03T12:10:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T14:05:31.000Z (over 3 years ago)
- Last Synced: 2024-12-18T06:23:11.793Z (over 1 year ago)
- Topics: a11y, accessibility, component, notifications, react, reactjs, toast, typescript
- Language: TypeScript
- Homepage: https://bananabobby.github.io/react-awesome-toasts/
- Size: 1.47 MB
- Stars: 61
- Watchers: 1
- Forks: 2
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Awesome Toasts
Easily customizable React notification system that manages its queue for you.
https://bananabobby.github.io/react-awesome-toasts/
- 🎙 Screen reader accessibility
- 🔧 Server side rendering support
- 📱 Responsive
- 📘 Typescript support
- 📦 React is the only dependency
- 🎉 5kb gzipped
### Get started
Install the package:
```
yarn add react-awesome-toasts
// or
npm install react-awesome-toasts
```
Wrap your app with `ToastProvider`:
```
import { ToastProvider } from 'react-awesome-toasts';
const App = () => {
return (
App content
)
}
```
Add toast methods to your component with one of the following methods:
*With High Order Component:*
```
import { withToast } from 'react-awesome-toasts';
const ToastButton = ({ toast }) => {
const toastProps = {
text: 'Message sent',
actionText: 'Undo',
ariaLabel: 'Message sent, click to undo',
onActionClick: toast.hide,
};
return toast.show(toastProps)}>Show toast;
}
export default withToast(ToastButton);
```
*With ToastConsumer:*
```
import { ToastConsumer } from 'react-awesome-toasts';
const toastProps = {
text: 'Message sent',
actionText: 'Undo',
ariaLabel: 'Message sent, click to undo',
};
{
({ show, hide }) => (
show({ ...toastProps, onActionClick: hide )}>
Show toast
)
}
```
### Provided methods
`hide()` - hides currently active toast.
`show(props)` - shows a toast and passes all props to the presentational component
### Presentational Toast component
By default `ToastProvider` uses `Toast` component provided by the library.
`Toast` component is responsible for the accessibility and responsiveness of notifications.
Keep in mind, that if your replace it with your custom component - you will have to handle both of these features in your component if you need them in your app.
Default `Toast` component has follow properties:
| Property | Description |
| --------------- | -------------------------------- |
| text `string`, required | Message to display in notification |
| actionText `string` | Text of the action button |
| onActionClick `func` | Action button click handler |
| ariaLabel `string` | Default: `text` property value. Should be used for better accessibility. |
| variant `"error"` | Variant of message |
### Accessibility
Default presentational `Toast` component provides accessibility features:
- When toast is opened, action button gets focused if its present
- When toast is hidden, previous focus is restored
- When toast is shown, screen reader reads its message or `ariaLabel` value. Since action button gets focused automatically - it's nice to have an aria-label that mentions it, e.g. `Item deleted, click to undo.
### Customization
`ToastProvider` accepts properties for customizing the behaviour of the notifications.
| Property | Description |
| --------------- | -------------------------------- |
| timeout `number` | Default: `4500`. The time until a toast is dismissed, in milliseconds. |
| component | Presentational component for displaying notifications. |
| position `top-right, bottom-right, top-left, bottom-left, top-center, bottom-center` | Default: `bottom-left`. Position of the toasts on the screen. |
### Roadmap
- Improve accessibility for focused toast actions
- Check colors AA accessibility level
- Let toasts hide without animation
- Custom container classnames