Toast

Cherry's toast system shows short, animated notifications in a fixed stack. It consists of three parts: a provider that holds the state, a component that renders the stack, and a hook to fire notifications from anywhere in the tree.

Wrap your app with the provider and render the stack once:

"use client";
import React from "react";
import {
  ToastNotifications,
  ToastNotificationsProvider,
} from "cherry-styled-components";

export default function App({ children }) {
  return (
    <ToastNotificationsProvider>
      <ToastNotifications />
      {children}
    </ToastNotificationsProvider>
  );
}

Fire notifications with the useToastNotifications hook:

"use client";
import React from "react";
import { Button, useToastNotifications } from "cherry-styled-components";

export default function SaveButton() {
  const { addNotification } = useToastNotifications();

  return (
    <Button
      onClick={() =>
        addNotification("Changes saved successfully.", {
          color: "success",
          autoHide: 4000,
        })
      }
    >
      Save
    </Button>
  );
}

A toast without autoHide stays until the user dismisses it with the built-in close button. Either way, once a toast has animated out it is removed from the stack entirely. The stack is an aria-live="polite" region, so screen readers announce new toasts as they appear.

addNotification

removeNotification

Also returned by useToastNotifications. Removes a toast from the stack immediately by its id (each toast in notifications carries a unique id). You rarely need this yourself: the close button and autoHide already remove toasts after their exit animation.

ToastNotifications Properties