Incorrect example on documentation: transition={Bounce} causes “Bounce is not defined” error

Author: sjha04180Created Dec 9, 2025Updated Dec 19, 2025

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

In the official React-Toastify documentation (Home → The Playground → Toast Container example), the following snippet is shown:

<ToastContainer
  position="top-right"
  autoClose={5000}
  hideProgressBar={false}
  newestOnTop={false}
  closeOnClick={false}
  rtl={false}
  pauseOnFocusLoss
  draggable
  pauseOnHover
  theme="light"
  transition={Bounce}
/>

This results in the following browser error:

Uncaught ReferenceError: Bounce is not defined Because Bounce is not imported or defined in the example.

If the current behavior is a bug, please provide the steps to reproduce the bug.

  1. Copy the example from the documentation under The Playground → Toast Container.
  2. Paste it in any React project.
  3. Run the project.
  4. Browser throws error: Bounce is not defined.

What is the expected behavior?

The docs should show either:

Option 1 — With import

`import { Bounce } from "react-toastify";`

<ToastContainer transition={Bounce} />

Option 2 — Using string value (works without import) <ToastContainer transition="Bounce" />

Either of these prevents the “Bounce is not defined” error.

Which versions of React, and which browser/OS are affected?

All browsers and React versions are affected when copying the example exactly as shown.