search

fkhadra / react-toastify

React notification made easy 🚀 !
https://fkhadra.github.io/react-toastify/introduction
MIT License
12.33k stars 676 forks source link

Syntax Error or a Bug in documentation #1091

Open arnavnagpurkar opened 3 months ago

arnavnagpurkar commented 3 months ago

Bug

What is the current behavior In the website https://fkhadra.github.io/react-toastify/introduction/ The "Toast Container" has a bug. image in the <ToastContainer/> there is a attribute transition where : semicolon is added instead of = equal too sign. When we assign value to attributes we need to insert = sign instead of : semicolons as in JSON. And the value Bounce must also be enclosed in the quotes or double quotes. If user will copy from this documentation then he'll face errors.

expected behaviour User should not face error. We need to updated it in the documentation to:

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

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? This issue is applicable to all versions of react and next.js

cjboco commented 1 month ago

I believe is should be:

import { ToastContainer, Bounce } from 'react-toastify';

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

transition needs a ToastTransition | undefined