Socket
Socket
Sign inDemoInstall

react-toastify

Package Overview
Dependencies
6
Maintainers
1
Versions
153
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-toastify

React notification made easy


Version published
Maintainers
1
Weekly downloads
1,736,842
decreased by-10.63%

Weekly downloads

Package description

What is react-toastify?

The react-toastify package allows developers to add customizable notification toasts to their React applications. It provides an easy way to display success, error, warning, and informational messages with a variety of animations, positions, and options.

What are react-toastify's main functionalities?

Displaying Toast Notifications

This feature allows you to display a simple toast notification with a message. The toast function can be called with a string message to display it to the user.

import { toast } from 'react-toastify';
toast('Hello World!');

Customizing Toast Appearance

This feature allows you to customize the appearance and behavior of the toast. You can specify the type (like success, error, etc.), position, auto-close time, and many other options.

import { toast } from 'react-toastify';
toast.success('Success!', {
  position: "top-right",
  autoClose: 5000,
  hideProgressBar: false,
  closeOnClick: true,
  pauseOnHover: true,
  draggable: true,
  progress: undefined,
});

Custom Rendered Components

This feature allows you to render a custom React component inside the toast. This is useful for creating complex toasts with custom layouts and functionality.

import { toast } from 'react-toastify';
const CustomToast = ({ closeToast }) => (
  <div>
    Something went wrong! <button onClick={closeToast}>Close</button>
  </div>
);
toast(<CustomToast />);

Updating Existing Toasts

This feature allows you to update an existing toast's content or appearance. You can change the message, type, or any other property of the toast after it has been displayed.

import { toast } from 'react-toastify';
const toastId = React.useRef(null);

const updateToast = () => {
  toast.update(toastId.current, { type: toast.TYPE.INFO, render: 'Updated!' });
};

// Create a toast and save its ID
toastId.current = toast('Initial message');

Controlling Toasts Programmatically

This feature gives you programmatic control over the toasts. You can dismiss all toasts or specific toasts by their ID, which can be useful in scenarios where user actions or other events should close notifications.

import { toast } from 'react-toastify';

// Display a toast
toast('Will close in 5 seconds', { autoClose: 5000 });

// Dismiss all toasts on demand
toast.dismiss();

// Dismiss a specific toast by ID
toast.dismiss(toastId.current);

Other packages similar to react-toastify

Readme

Source

React-Toastify

Financial Contributors on Open Collective React-toastify CI npm npm NPM Coveralls github

React toastify

stacked

🎉 React-Toastify allows you to add notifications to your app with ease. No more nonsense!

Installation

$ npm install --save react-toastify
$ yarn add react-toastify

Features

  • Easy to set up for real, you can make it work in less than 10sec!
  • Super easy to customize
  • RTL support
  • Swipe to close 👌
  • Can choose swipe direction
  • Super easy to use an animation of your choice. Works well with animate.css for example
  • Can display a react component inside the toast!
  • Has onOpen and onClose hooks. Both can access the props passed to the react component rendered inside the toast
  • Can remove a toast programmatically
  • Define behavior per toast
  • Pause toast when the window loses focus 👁
  • Fancy progress bar to display the remaining time
  • Possibility to update a toast
  • You can control the progress bar a la nprogress 😲
  • You can limit the number of toast displayed at the same time
  • Dark mode 🌒
  • Pause timer programmaticaly
  • Stacked notifications!
  • And much more !

The gist

  import React from 'react';

  import { ToastContainer, toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  
  function App(){
    const notify = () => toast("Wow so easy!");

    return (
      <div>
        <button onClick={notify}>Notify!</button>
        <ToastContainer />
      </div>
    );
  }

Demo

A demo is worth a thousand words

Documentation

Check the documentation to get you started!

Contribute

Show your ❤️ and support by giving a ⭐. Any suggestions are welcome! Take a look at the contributing guide.

You can also find me on reactiflux. My pseudo is Fadi.

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

Release Notes

You can find the release note for the latest release here

You can browse them all here

License

Licensed under MIT

Keywords

FAQs

Last updated on 15 Mar 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc