Notifications

Import

import { NotificationCenter, toaster } from '@cerberus/react'

Usage

The NotificationCenter component is used to manage notifications in your application. It works together with the toaster object to display notifications.

Types

Update the options.types of the toaster.create function to change the theme of the notification.

The options are info, success, warning, danger, and loading.

Subtle Notifications

Subtle notifications are a less intrusive way to inform users about events or updates. They typically have a softer appearance and may not require immediate user action.

Use the usage: 'subtle' option to create a subtle notification.

Custom Configuration

You can customize the notification behavior by calling the createToaster function. This allows you to create a new toaster instance with your desired configuration.

You can either use it as a local one-off or pass it into the NotificationCenter component for a global change.

Badges

Badges can be used to show the number of notifications on any trigger by using the data-notify and data-notify-count attributes.

Note

Combine this with the `formatNotifyCount` helper that will restrict the count to 3 digits.

Primitives

You can utilize the primitive components to customize the toast notification.

API

Props

The NotificationCenter component is an abstraction of the primitives and doesn't accept any props.

toaster

The toaster object is used to create notifications and accepts the following options:

ToasterAction

The ToasterAction object is used to create an action button for the notification and accepts the following options:

Parts

The NotificationParts API is an Object containing the full family of components.

Note

It is best to only use the NotificationParts if you are building a custom solution. Importing Object based components will ship every property it includes into your bundle, regardless if you use it or not.