WUI logo

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 or bottom-right
  • duration: before closing the element, in ms, with a default 7000. It can also be set to null 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, and
  • Growl 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 #
NameType(s)DefaultRequired
variant
"default"
"error"
"warning"
"info"
"success"
default
onClose
() => void
hasCloseButton
Boolean
true
icon
Element
Toast.Growl #
NameType(s)DefaultRequired
variant
"default"
"error"
"warning"
"info"
"success"
default
onClose
() => void
hasCloseButton
Boolean
true
icon
Element

Packages #

Dependencies #
Peer dependencies #

Previous

Alert