Notifications
Allows user to provide brief notifications.
version
5.14.0
install
yarn add @welcome-ui/toast
usage
import { Notifications, Toast, toast } from '@welcome-ui/toast'
About #
Notification component with react-hot-toast and 2 components:
- Growl
- Snackbar
Notifications #
Before using the Toast
component, you must add the Notifications
component in your project root. This component will contain all your toasts.
function App() {// ...<Notifications pauseOnHover={false} />// ...}
You can pass a boolean value to pauseOnHover
prop (default to true
) to pause duration of all notifications on mouse hover.
toast() #
Use toast
function to show the toast element. Example below with a custom component.
Options #
The toast
function takes a component to be displayed and an options
object:
- position: one of
top-left
,top-center
,top-right
,bottom-left
,bottom-center
orbottom-right
- duration: before closing the element, in ms, with a default
7000
. It can also be set tonull
to prevent your element from closing automatically.
Supplied components #
You can create your own notification component to display in the Toast or one of our default components: Snackbar
and Growl
.
In general:
Snackbar
is used to display a temporary, information-only notification, andGrowl
is used to display a more important notification with an action (that requires the user to close the notification)
Snackbar #
At bottom center by default.
Growl #
At top right by default.
Custom close function #
You can add your custom function when user click on close button
Without close button on Growl or Snackbar #
You can choose not to show a close button on Growl or Snackbar with the hasCloseButton
prop (defaults to true
).
Properties #
Toast.Snackbar #
Name | Type(s) | Default | Required |
---|---|---|---|
variant | "default" "error" "warning" "info" "success" | default | |
onClose | () => void | ||
hasCloseButton | Boolean | true | |
icon | Element |
Toast.Growl #
Name | Type(s) | Default | Required |
---|---|---|---|
variant | "default" "error" "warning" "info" "success" | default | |
onClose | () => void | ||
hasCloseButton | Boolean | true | |
icon | Element |