Skip to main content

Handling autoClose

The autoClose prop accept a duration in milliseconds or false.

Change the default delay​

import { ToastContainer } from 'react-toastify';

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

Change the delay per toast for more control​

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
})