tw-noti

TailwindCSS Toast Notifications and Provider for React Applications

A simple way to set up Toast notifications in your React projects when you are using Tailwind CSS.

DEMO on StackBlitz

Installation

Make sure you have TailwindCSS setup in your project

npm install tw-noti

Usage

• Import the ToastProvider and use it to wrap your application:

import { ToastProvider } from 'tw-noti';

export default function App() {
  return (
    <>
      <ToastProvider
        maxToasts={3}
        timeout={3000}
        reverseStackOrder
        containerClasses='right-12 bottom-12'
      >
        <Child />
      </ToastProvider>
    </>
  );
}

• In a child component, import the useToast hook and use it to either enqueue or dequeue your Toast notification:

import { useToast } from 'tw-noti';

const Child = () => {
  // Initialize the hook:
  const { enqueueToast } = useToast();

  const handleClick = () => {
    // Pass your message and the type of Toast you would like to display:
    enqueueToast({ content: 'This is a notification', type: 'success' });
  };

  return (
    <div class='container' style={{ width: '80 %', margin: '0 auto' }}>
      <button
        className='text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800'
        onClick={handleClick}
      >
        Show a toast!
      </button>
    </div>
  );
};

export default Child;

Components

ToastProvider

The ToastProvider houses the ToastContainer and the Toaster.maxToasts

Prop	type	default	description
maxToasts	number	3	Number of toasts that can be displayed at one time
reverseStackOrder	boolean	false	If true, reverses the order in which Toasts are rendered
persist	boolean	false	If false, toasts will be dismissed after timeout
timeout	number	3000	If persist set to false, amount of time (ms) Toasts wait before automatically dismissing
buttonClasses	string	'h-8 w-8 ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 inline-flex dark:text-gray-500 text-gray-400 dark:hover:text-white hover:text-gray-900 dark:bg-gray-800 bg-white dark:hover:bg-gray-700 hover:bg-gray-100'	Accepts Tailwind classes to override default Toast action button styles
containerClasses	string	'absolute bottom-12 left-12'	Accepts Tailwind classes to override default Toast container styles
iconClasses	Theme['icon']['classes']	See Theme	Accepts Tailwind classes to override default Toast icon styles
layoutClasses	string	'animate-fade-down animate-ease-in-out flex items-center w-full max-w-xs p-4 rounded-lg shadow dark:bg-gray-800 bg-white dark:text-gray-400 text-gray-500'	Accepts Tailwind classes to override default Toast layout styles
messageClasses	string	'ml-3 text-sm font-normal'	Accepts Tailwind classes to override default Toast message styles

Hooks

useToast

useToast is a React hook that provides access to the ToastContext and its associated props.

Usage

import { useToast } from './useToast';

const MyComponent = () => {
  const toastContext = useToast();
  // ...
};

Arguments

None.

Returns

Returns the ToastContextProps associated with the ToastContext.

interface ToastContextProps {
  reverseStackOrder: boolean;
  theme: Theme;
  toasts: Toast[];
  enqueueToast: ({ content, type }: { content: string; type: string }) => void;
  dequeueToast: (id: number) => void;
}

Errors

If useToast is used outside of a ToastProvider, an error will be thrown.

Default Toast Variants

Type	Description
info	Blue - Used for general notifications, alerts, and messages
success	Green - Used for success messages
error	Red - Used for errors, access denied messages, and other bad stuff
warning	Orange - Used for warning messages or things the user must pay attention to

Customization

To override the default styling, you can apply Tailwind CSS classes to the ToastProvider component via its various props.

Examples:

• Position the notifications in the bottom-right corner:

<ToastProvider containerClasses='right-12 bottom-12'>
  <Child />
</ToastProvider>

• Change the layout background color and change the text color:

<ToastProvider
  layoutClasses='dark:bg-teal-500'
  messageClasses='dark:text-black'
>
  <Child />
</ToastProvider>

• Customize the close button:

<ToastProvider buttonClasses='dark:bg-white'>
  <Child />
</ToastProvider>

• Edit the icon:

<ToastProvider
  iconClasses={{
    info: { altText: 'Green Icon', classes: 'dark:bg-orange-500' },
    error: { altText: 'Teal Icon', classes: 'dark:bg-teal-500' },
  }}
>
  <Child />
</ToastProvider>

Default Theme

• ButtonClasses: 'h-8 w-8 ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 inline-flex dark:text-gray-500 text-gray-400 dark:hover:text-white hover:text-gray-900 dark:bg-gray-800 bg-white dark:hover:bg-gray-700 hover:bg-gray-100'
• ContainerClasses: 'absolute bottom-12 left-12'
• LayoutClasses: 'animate-fade-down animate-ease-in-out flex items-center w-full max-w-xs p-4 rounded-lg shadow dark:bg-gray-800 bg-white dark:text-gray-400 text-gray-500'
• MessageClasses: 'ml-3 text-sm'
• IconClasses:

{
  error: {
    altText: 'Big X icon',
    classes: 'h-8 w-8 inline-flex items-center justify-center flex-shrink-0 rounded-lg dark:text-red-200 text-red-500 dark:bg-red-800 bg-red-100',
  },
  info: {
    altText: 'Info Circle icon',
    classes: 'h-8 w-8 inline-flex items-center justify-center flex-shrink-0 rounded-lg dark:text-blue-200 text-blue-500 dark:bg-blue-800 bg-blue-100',
  },
  success: {
    altText: 'Checkmark icon',
    classes: 'h-8 w-8 inline-flex items-center justify-center flex-shrink-0 rounded-lg dark:text-green-200 text-green-500 dark:bg-green-800 bg-green-100',
  },
  warning: {
    altText: 'Warning icon',
    classes: 'h-8 w-8 inline-flex items-center justify-center flex-shrink-0 rounded-lg dark:text-orange-200 text-orange-500 dark:bg-orange-800 bg-orange-100',
  }
}

Theme

interface Theme {
  button: { classes: string };
  container: { classes: string };
  icon: {
    classes: {
      [key: string]: {
        altText: string,
        classes: string,
      },
    },
  };
  layout: { classes: string };
  message: { classes: string };
}

Toaster Component Reference

<ToastContainer containerClasses=''>
  {toasts.map((toast) => (
    <ToastLayout layoutClasses=''>
      <ToastIcon iconClasses='' />
      <ToastMessage messageClasses='' />
      <ToastActionBtn buttonClasses='' />
    </ToastLayout>
  ))}
</ToastContainer>