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.

Property	Description	Type
text	The first paramenter is the text content	String
config	The second parameter is optional configuration	Object

The optional configuration object takes a few properties listed below.

Property	Description	Type
autoHide	Duration in milliseconds	Number
color	Defines the notification color	"info" \| "error" \| "success" \| "warning"