• DocumentationDocs

Toast Notifications

Toast Notifications notify the user of a system occurrence. The notifications should have a consistent location in each application. There are 3 different types of notifications,info, success, error, warning.

Context

In order for notifications to work, the application has to be wrapped with the React Context component provided by Cherry.

import {
	ToastNotifications,
	ToastNotificationsProvider,
} from "cherry-components";

function App({ Component, pageProps }) {
	return (
		<ToastNotificationsProvider>
			<Component {...pageProps} />
			<ToastNotifications />
		</ToastNotificationsProvider>
	);
}

export default App;
Wrap everything with the ToastNotificationsProvider. Include also the ToastNotifications component as a child, it takes care of the notifications rendering.

Notifications can be triggered from anywhere, in a button, input or after a certain event is executed. To create a new notification make use of the context.

import React, { useContext } from "react";
import { ToastNotificationsContext } from "cherry-components";

function Page() {
	const { addNotification } = useContext(ToastNotificationsContext);

	return (
		<div>
			<button onClick={() => {
				addNotification("Default notification");
			}}>
				Trigger Notification
			</button>
		</div>
	);
}

export default Page;
<Button onClick={() => { addNotification("Default notification"); }}>
	Default Notification
</Button>
<Button
	onClick={() => {
		addNotification("Success notification", {
			color: "success",
			autoHide: 3500,
		});
	}}
>
	Success Notification
</Button>
<Button
	onClick={() => {
		addNotification("Error notification", {
			color: "error",
			autoHide: 3500,
		});
	}}
>
	Error Notification
</Button>
<Button
	onClick={() => {
		addNotification("Warning notification", {
			color: "warning",
			autoHide: 3500,
		});
	}}
>
	Warning Notification
</Button>

addNotification Parameters

Below you can find the available parameters for the addNotification() function.

PropertyDescriptionType
textThe first paramenter is the text contentString
configThe second parameter is optional configurationObject

The optional configuration object takes a few properties listed below.

PropertyDescriptionType
autoHideDuration in millisecondsNumber
colorDefines the notification color"info" | "error" | "success" | "warning"

ToastNotifications Props

Below you can find the available props for the <ToastNotifications /> component.

PropDescriptionType
alignHorizontal alignment."right" | "left" | "center"
bottomShow notification from the bottom of the screen.Boolean

All Variation

Grid ComponentsEmotion Breakpoints

Follow the creator

Join the community