Toast Alert

A package to display Core Toast notifications.

Importing

import { ToastAlertProvider, useToastAlertContext } from '@procore/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>
    </>
  );
}