React Toastify - quotehound/v2QHForms GitHub Wiki

Notification system for usre interaction - will use in group with React Hook Forms

Installation

npm install --save react-toastify

Example of usage

Remember to render the ToastContainer once in your application tree. If you can't figure out where to put it, rendering it in the application root would be the best bet.

import React from 'react';
  import { ToastContainer, toast } from 'react-toastify';

  import 'react-toastify/dist/ReactToastify.css';
  // minified version is also included
  // import 'react-toastify/dist/ReactToastify.min.css';

  function App(){
    const notify = () => toast("Wow so easy !");

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

Usage and personalization

By default, all the toasts will be positioned on the top right of your browser. If a position is set on a toast, the one defined on ToastContainer will be replaced.

The following values are allowed: top-right, top-center, top-left, bottom-right, bottom-center, bottom-left

For convenience, toast exposes a POSITION property to avoid any typos.

import React from 'react';
  import { toast } from 'react-toastify';

  function Example() {
    const notify = () => {
      toast("Default Notification !");

      toast.success("Success Notification !", {
        position: toast.POSITION.TOP_CENTER
      });

      toast.error("Error Notification !", {
        position: toast.POSITION.TOP_LEFT
      });

      toast.warn("Warning Notification !", {
        position: toast.POSITION.BOTTOM_LEFT
      });

      toast.info("Info Notification !", {
        position: toast.POSITION.BOTTOM_CENTER
      });

      toast("Custom Style Notification with css class!", {
        position: toast.POSITION.BOTTOM_RIGHT,
        className: 'foo-bar'
      });
    };

    return <button onClick={notify}>Notify</button>;
  }

The autoClose prop accept a duration in milliseconds or false.

Change the default delay

import React from 'react';
import { ToastContainer } from 'react-toastify';

// close toast after 8 seconds
const App = () => (
  <ToastContainer autoClose={8000} />
);

Change the delay per toast for more control

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';

function Example() {
  const closeAfter15 = () => toast("Will close after 15s", { autoClose: 15000 });

  const closeAfter7 = () => toast("Will close after 7s", { autoClose: 7000 });

  return (
    <div>
      <button onClick={closeAfter15}>Close after 15 seconds</button>
      <button onClick={closeAfter7}>Close after 7 seconds</button>
      <ToastContainer autoClose={8000} />
    </div>
  );
}

Prevent the toast from closing by default

<ToastContainer autoClose={false} />

Prevent the toast from closing per toast

toast("hello", {
  autoClose: false
})

An id is returned each time you display a toast, use it to remove a given toast programmatically by calling toast.dismiss(id)

import React from 'react';
import { toast } from 'react-toastify';

function Example(){
  const toastId = React.useRef(null);

  const notify = () => toastId.current = toast("Lorem ipsum dolor");

  const dismiss = () =>  toast.dismiss(toastId.current);

  const dismissAll = () =>  toast.dismiss();

  return (
    <div>
      <button onClick={notify}>Notify</button>
      <button onClick={dismiss}>Dismiss</button>
      <button onClick={dismissAll}>Dismiss All</button>
    </div>
  );
}
⚠️ **GitHub.com Fallback** ⚠️