@procore/labs-toast-alert

Toast Alert

A package to display Core Toast notifications.

Importing

import {
  ToastAlertProvider,
  useToastAlertContext,
} from "@procore/labs-toast-alert";

Usage

function App() {
  return (
    <ToastAlertProvider>
      <ComponentWithToasts />
    </ToastAlertProvider>
  );
};

function ComponentWithToasts() {
  const { showToast, hideAllToasts } = useToastAlertContext();

  return (
    <>
      <button
        onClick={() => {
          showToast.success("Success toast description", {
            afterClose: () => console.log("Success toast closed!"),
          });
        }}
      >
        Show Success Toast
      </button>

      <button
        onClick={() => {
          showToast.error("Error toast description");
        }}
      >
        Show Error Toast
      </button>

      <button
        onClick={() => {
          hideAllToasts();
        }}
      >
        Hide All Toasts
      </button>
    </>
  );
};