react-toast-notifications

🍞 A toast notification system for react

2,169

174

2,169

View on GitHub View on NPM

Top Related Projects

notistack

4,026

Highly customizable notification snackbars (toasts) that can be stacked on top of each other

react-notifications-component

1,281

Delightful and highly customisable React Component to notify your users

reapop

1,557

:postbox: A simple and customizable React notifications system

sweetalert

22,381

A beautiful replacement for JavaScript's "alert"

Quick Overview

React Toast Notifications is a lightweight, customizable library for adding toast notifications to React applications. It provides an easy-to-use API for creating and managing notifications, with support for various styles, animations, and placement options.

Pros

Simple and intuitive API for creating and managing notifications
Highly customizable, allowing for custom styles and components
Supports multiple notification placements (top, bottom, left, right)
Lightweight with minimal dependencies

Cons

Limited built-in animation options
Lacks advanced features like progress bars or action buttons
Documentation could be more comprehensive
Not actively maintained (last update was over 2 years ago)

Code Examples

Creating a basic toast notification:

import { useToasts } from 'react-toast-notifications'

function MyComponent() {
  const { addToast } = useToasts()
  
  const handleClick = () => {
    addToast('This is a toast message', { appearance: 'success' })
  }

  return <button onClick={handleClick}>Show Toast</button>
}

Customizing toast appearance:

import { ToastProvider } from 'react-toast-notifications'

function App() {
  return (
    <ToastProvider
      autoDismiss
      autoDismissTimeout={6000}
      placement="bottom-center"
    >
      {/* Your app components */}
    </ToastProvider>
  )
}

Using a custom toast component:

import { ToastProvider } from 'react-toast-notifications'

const MyCustomToast = ({ appearance, children }) => (
  <div style={{ background: appearance === 'error' ? 'red' : 'green' }}>
    {children}
  </div>
)

function App() {
  return (
    <ToastProvider components={{ Toast: MyCustomToast }}>
      {/* Your app components */}
    </ToastProvider>
  )
}

Getting Started

Install the package:
```
npm install react-toast-notifications
```

Wrap your app with the ToastProvider:

import { ToastProvider } from 'react-toast-notifications'

function App() {
  return (
    <ToastProvider>
      {/* Your app components */}
    </ToastProvider>
  )
}

Use the useToasts hook in your components to add notifications:

import { useToasts } from 'react-toast-notifications'

function MyComponent() {
  const { addToast } = useToasts()
  
  const handleClick = () => {
    addToast('Hello, toast!', { appearance: 'info' })
  }

  return <button onClick={handleClick}>Show Toast</button>
}

Competitor Comparisons

react-toastify

13,348

React notification made easy 🚀 !

Pros of react-toastify

More comprehensive feature set, including progress bars and update functionality
Higher popularity and community support (more stars, contributors, and regular updates)
Extensive customization options for toast appearance and behavior

Cons of react-toastify

Slightly larger bundle size due to additional features
Steeper learning curve for advanced customizations
More complex API compared to react-toast-notifications

Code Comparison

react-toastify:

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

toast.success('Success message');
<ToastContainer />

react-toast-notifications:

import { ToastProvider, useToasts } from 'react-toast-notifications';

const { addToast } = useToasts();
addToast('Success message', { appearance: 'success' });
<ToastProvider />

Both libraries offer similar basic functionality for displaying toast notifications. react-toastify provides a more direct approach with its toast object, while react-toast-notifications uses a hook-based API. react-toastify's syntax is slightly more concise and offers more built-in options for toast types and customization out of the box.

react-hot-toast

10,630

Smoking Hot React Notifications 🔥

Pros of react-hot-toast

Lightweight and minimalistic design, resulting in a smaller bundle size
Supports custom animations and styling out of the box
Offers a simpler API with less boilerplate code

Cons of react-hot-toast

Less customizable in terms of positioning and layout options
Fewer built-in toast types compared to react-toast-notifications
Limited documentation and examples for advanced use cases

Code Comparison

react-hot-toast:

import toast from 'react-hot-toast';

const notify = () => toast('Here is your toast.');

react-toast-notifications:

import { useToasts } from 'react-toast-notifications';

const { addToast } = useToasts();
const notify = () => addToast('Here is your toast', { appearance: 'success' });

Both libraries offer easy-to-use APIs for creating toast notifications in React applications. react-hot-toast provides a more concise syntax, while react-toast-notifications offers more granular control over toast appearance and behavior.

react-hot-toast is better suited for projects requiring a lightweight solution with minimal setup, while react-toast-notifications is more appropriate for applications needing extensive customization options and a wider range of built-in toast types.

notistack

4,026

Highly customizable notification snackbars (toasts) that can be stacked on top of each other

Pros of notistack

Seamless integration with Material-UI, providing a consistent look and feel
Built-in support for stacking multiple notifications
Offers more customization options, including custom content and actions

Cons of notistack

Requires Material-UI as a dependency, which may not be suitable for all projects
Slightly more complex API compared to react-toast-notifications
Limited built-in animation options

Code Comparison

react-toast-notifications:

import { useToasts } from 'react-toast-notifications'

const { addToast } = useToasts()
addToast('This is a toast message', { appearance: 'success' })

notistack:

import { useSnackbar } from 'notistack'

const { enqueueSnackbar } = useSnackbar()
enqueueSnackbar('This is a snackbar message', { variant: 'success' })

Both libraries offer similar ease of use, with notistack using the term "snackbar" instead of "toast". The main difference lies in the naming conventions and the slightly different options passed to the notification function.

notistack provides more advanced features and customization options, making it suitable for complex applications, especially those using Material-UI. react-toast-notifications, on the other hand, offers a simpler API and is more lightweight, making it a good choice for projects that don't require extensive customization or Material-UI integration.

react-notifications-component

1,281

Delightful and highly customisable React Component to notify your users

Pros of react-notifications-component

More customizable with a wider range of notification types and styles
Supports animations and custom containers
Offers more advanced features like updating existing notifications

Cons of react-notifications-component

Slightly more complex API, which may require a steeper learning curve
Larger bundle size due to additional features and dependencies

Code Comparison

react-notifications-component:

import { Store } from "react-notifications-component";

Store.addNotification({
  title: "Success!",
  message: "Your action was completed",
  type: "success",
  insert: "top",
  container: "top-right",
  animationIn: ["animate__animated", "animate__fadeIn"],
  animationOut: ["animate__animated", "animate__fadeOut"],
  dismiss: { duration: 5000 }
});

react-toast-notifications:

import { useToasts } from 'react-toast-notifications';

const { addToast } = useToasts();

addToast('Your action was completed', {
  appearance: 'success',
  autoDismiss: true,
});

Both libraries provide easy-to-use APIs for adding notifications to React applications. react-notifications-component offers more customization options and advanced features, while react-toast-notifications provides a simpler, more straightforward approach. The choice between the two depends on the specific requirements of your project and the level of customization needed.

reapop

1,557

:postbox: A simple and customizable React notifications system

Pros of reapop

More customizable with extensive theming options
Supports multiple notification positions
Includes built-in animations and transitions

Cons of reapop

Larger bundle size due to additional features
Steeper learning curve for advanced customizations
Less frequently updated (last update over a year ago)

Code Comparison

react-toast-notifications:

import { useToasts } from 'react-toast-notifications'

const { addToast } = useToasts()
addToast('This is a toast message', { appearance: 'success' })

reapop:

import { notify } from 'reapop'

notify('This is a notification', {
  status: 'success',
  position: 'top-right',
  dismissAfter: 3000
})

Both libraries offer simple APIs for creating notifications, but reapop provides more configuration options out of the box. react-toast-notifications focuses on simplicity, while reapop offers more advanced features at the cost of a slightly more complex API.

reapop's extensive customization options make it suitable for projects requiring fine-grained control over notification appearance and behavior. react-toast-notifications is ideal for simpler use cases where quick implementation and minimal setup are priorities.

Consider your project's specific needs, desired level of customization, and performance requirements when choosing between these libraries.

sweetalert

22,381

A beautiful replacement for JavaScript's "alert"

Pros of SweetAlert

More customizable alert designs with a wider range of options
Supports promise-based usage for easier integration with asynchronous operations
Includes built-in icons and animations for enhanced visual appeal

Cons of SweetAlert

Larger bundle size, which may impact page load times
Not specifically designed for React, potentially requiring additional setup
May have a steeper learning curve due to more configuration options

Code Comparison

SweetAlert:

Swal.fire({
  title: 'Success!',
  text: 'Operation completed',
  icon: 'success',
  confirmButtonText: 'OK'
});

React Toast Notifications:

addToast('Operation completed', {
  appearance: 'success',
  autoDismiss: true,
});

Summary

SweetAlert offers more customization and visual options, making it suitable for creating rich, interactive alerts. It's not React-specific but can be used in various JavaScript environments. React Toast Notifications, on the other hand, is tailored for React applications and focuses on simplicity and ease of use for toast-style notifications. The choice between the two depends on the specific needs of your project, such as the desired level of customization, React integration, and performance considerations.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

ð¨ Not Maintained

This was a great project to learn from and fulfilled the requirements it set out to. Unfortunately, I can no-longer give this project the time it needs. Consider react-hot-toast as an alternative, or look at the source and make your own ð (there really isn't much to it).

React Toast Notifications

A configurable, composable, toast notification system for react.

https://jossmac.github.io/react-toast-notifications

Install

yarn add react-toast-notifications

Use

Wrap your app in the ToastProvider, which provides context for the Toast descendants.

import { ToastProvider, useToasts } from 'react-toast-notifications';

const FormWithToasts = () => {
  const { addToast } = useToasts();

  const onSubmit = async value => {
    const { error } = await dataPersistenceLayer(value);

    if (error) {
      addToast(error.message, { appearance: 'error' });
    } else {
      addToast('Saved Successfully', { appearance: 'success' });
    }
  };

  return <form onSubmit={onSubmit}>...</form>;
};

const App = () => (
  <ToastProvider>
    <FormWithToasts />
  </ToastProvider>
);

ToastProvider Props

For brevity:

PlacementType is equal to 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right'.
TransitionState is equal to 'entering' | 'entered' | 'exiting' | 'exited'.

Property	Description
autoDismissTimeout `number`	Default `5000`. The time until a toast will be dismissed automatically, in milliseconds.
autoDismiss `boolean`	Default: `false`. Whether or not to dismiss the toast automatically after a timeout.
children `Node`	Required. Your app content.
components `{ ToastContainer, Toast }`	Replace the underlying components.
newestOnTop `boolean`	Default `false`. When true, insert new toasts at the top of the stack.
placement `PlacementType`	Default `top-right`. Where, in relation to the viewport, to place the toasts.
portalTargetSelector `string`	Which element to attach the container's portal to. Uses `document.body` when not provided.
transitionDuration `number`	Default `220`. The duration of the CSS transition on the `Toast` component.

Toast Props

Property	Description
appearance	Used by the default toast. One of `success`, `error`, `warning`, `info`.
children	Required. The content of the toast notification.
autoDismiss `boolean`	Inherited from `ToastProvider` if not provided.
autoDismissTimeout `number`	Inherited from `ToastProvider`.
onDismiss: `Id => void`	Passed in dynamically. Can be called in a custom toast to dismiss it.
placement `PlacementType`	Inherited from `ToastProvider`.
transitionDuration `number`	Inherited from `ToastProvider`.
transitionState: `TransitionState`	Passed in dynamically.

Hook

The useToast hook has the following signature:

const {
  addToast,
  removeToast,
  removeAllToasts,
  updateToast,
  toastStack,
} = useToasts();

The addToast method has three arguments:

The first is the content of the toast, which can be any renderable Node.
The second is the Options object, which can take any shape you like. Options.appearance is required when using the DefaultToast. When departing from the default shape, you must provide an alternative, compliant Toast component.
The third is an optional callback, which is passed the added toast ID.

The removeToast method has two arguments:

The first is the ID of the toast to remove.
The second is an optional callback.

The removeAllToasts method has no arguments.

The updateToast method has three arguments:

The first is the ID of the toast to update.
The second is the Options object, which differs slightly from the add method because it accepts a content property.
The third is an optional callback, which is passed the updated toast ID.

The toastStack is an array of objects representing the current toasts, e.g.

[
  {
    content: 'Something went wrong',
    id: 'generated-string',
    appearance: 'error',
  },
  { content: 'Item saved', id: 'generated-string', appearance: 'success' },
];

Replaceable Components

To bring each toast notification inline with your app, you can provide alternative components to the ToastProvider:

import { ToastProvider } from 'react-toast-notifications';

const MyCustomToast = ({ appearance, children }) => (
  <div style={{ background: appearance === 'error' ? 'red' : 'green' }}>
    {children}
  </div>
);

const App = () => (
  <ToastProvider components={{ Toast: MyCustomToast }}>...</ToastProvider>
);

To customize the existing component instead of creating a new one, you may import DefaultToast:

import { DefaultToast } from 'react-toast-notifications';
export const MyCustomToast = ({ children, ...props }) => (
  <DefaultToast {...props}>
    <SomethingSpecial>{children}</SomethingSpecial>
  </DefaultToast>
);

Alternatives

This library may not meet your needs. Here are some alternative I came across whilst searching for this solution:

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of react-toastify

Cons of react-toastify

Code Comparison

Pros of react-hot-toast

Cons of react-hot-toast

Code Comparison

Pros of notistack

Cons of notistack

Code Comparison

Pros of react-notifications-component

Cons of react-notifications-component

Code Comparison

Pros of reapop

Cons of reapop

Code Comparison

Pros of SweetAlert

Cons of SweetAlert

Code Comparison

Summary

Convert designs to code with AI

README

ð¨ Not Maintained

React Toast Notifications

Install

Use

ToastProvider Props

Toast Props

Hook

Replaceable Components

Alternatives

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days

ð¨ Not Maintained