{"id":3509,"date":"2022-09-22T00:47:54","date_gmt":"2022-09-21T19:47:54","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3509"},"modified":"2022-09-22T00:47:56","modified_gmt":"2022-09-21T19:47:56","slug":"reactjs-react-toastify-show-colorful-alert-toast-or-notification-messages","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/reactjs-react-toastify-show-colorful-alert-toast-or-notification-messages\/","title":{"rendered":"React.js react-toastify Show Colorful Alert Toast or Notification Messages"},"content":{"rendered":"\n
npx create-react-app toastifyexample<\/pre><\/div>\n\n\n\n
cd toastify<\/pre><\/div>\n\n\n\n
npm i react-toastify<\/pre><\/div>\n\n\n\n
Full Example with Source Code <\/h2>\n\n\n\n
App.js<\/h3>\n\n\n\n
import React, { useState } from 'react'\nimport '.\/App.css'\nimport 'react-toastify\/dist\/ReactToastify.css'\nimport { toast, ToastContainer } from 'react-toastify'\n\nfunction App() {\n\n  const notify = (message, hasError = false) => {\n    if (hasError) {\n      toast.error(message, {\n        position: 'top-center',\n        autoClose: 5000,\n        hideProgressBar: false,\n        closeOnClick: true,\n        pauseOnHover: true,\n        draggable: true,\n        progress: undefined,\n      })\n    } else {\n      toast(message, {\n        position: 'top-center',\n        autoClose: 5000,\n        hideProgressBar: false,\n        closeOnClick: true,\n        pauseOnHover: true,\n        draggable: true,\n        progress: undefined,\n      })\n    }\n  }\n\n  const showAlert = () => {\n    notify("Hello world",true)\n  }\n\n\n  return (\n    <div className='App'>\n\n      <button onClick={showAlert}>\n        Show Alert\n      <\/button>\n  \n          <ToastContainer\n            position='top-center'\n            autoClose={5000}\n            hideProgressBar={false}\n            newestOnTop={false}\n            closeOnClick\n            rtl={false}\n            pauseOnFocusLoss\n            draggable\n            pauseOnHover\n          \/>\n    <\/div>\n  )\n}\n\nexport default App<\/pre><\/div>\n\n\n\n
Here we have a simple\u00a0button<\/code>\u00a0to show alert messages. When we click this button the\u00a0toastify<\/code>\u00a0alert notification will show in the\u00a0center<\/code> position as we had given the position\u00a0top-center<\/code>.\u00a0Now, if you run the app, you will see something like the below screenshot.<\/p>\n\n\n\n
\"react-toastify
react-toastify example<\/figcaption><\/figure>\n\n\n\n
As you can see we are showing the\u00a0error<\/code>\u00a0notification message. Now, to show the\u00a0success<\/code>\u00a0notification you need to change the below code in App.js<\/code> file.<\/p>\n\n\n\n
App.js<\/h2>\n\n\n\n
import React, { useState } from 'react'\nimport '.\/App.css'\nimport 'react-toastify\/dist\/ReactToastify.css'\nimport { toast, ToastContainer } from 'react-toastify'\n\nfunction App() {\n\n  const notify = (message, hasError = false) => {\n    if (hasError) {\n      toast.error(message, {\n        position: 'top-center',\n        autoClose: 5000,\n        hideProgressBar: false,\n        closeOnClick: true,\n        pauseOnHover: true,\n        draggable: true,\n        progress: undefined,\n      })\n    } else {\n      toast(message, {\n        position: 'top-center',\n        autoClose: 5000,\n        hideProgressBar: false,\n        closeOnClick: true,\n        pauseOnHover: true,\n        draggable: true,\n        progress: undefined,\n      })\n    }\n  }\n\n  const showAlert = () => {\n    notify("Data is inserted successfully")\n  }\n\n\n  return (\n    <div className='App'>\n\n      <button onClick={showAlert}>\n        Show Alert\n      <\/button>\n  \n          <ToastContainer\n            position='top-center'\n            autoClose={5000}\n            hideProgressBar={false}\n            newestOnTop={false}\n            closeOnClick\n            rtl={false}\n            pauseOnFocusLoss\n            draggable\n            pauseOnHover\n          \/>\n    <\/div>\n  )\n}\n\nexport default App<\/pre><\/div>\n\n\n\n
\"react-toastify
react-toastify example<\/figcaption><\/figure>\n\n\n\n
Themes of Notification Messages<\/h2>\n\n\n\n
Three themes are supported<\/p>\n\n\n\n