{"library":"react-toastify","title":"React-Toastify: Highly Customizable Notifications","description":"React-Toastify is a widely adopted library for adding highly customizable, non-blocking notifications, often called \"toasts\" or \"snackbars,\" to React applications. The current stable version is 11.0.5. It maintains an active development cycle, frequently releasing patch and minor updates, with significant major versions (like v10 and v11) introducing substantial architectural changes and feature enhancements. Key differentiators include its ease of integration, comprehensive customization options allowing it to blend into any design system, full RTL support, intuitive swipe-to-close gestures, the ability to render React components within toasts, programmatic toast updates, and a configurable progress bar. Version 11 streamlined setup by automatically injecting its stylesheet, eliminating the need for manual CSS imports. Version 10 involved a significant internal rewrite, improving stability and fixing long-standing issues. It ships with TypeScript types, facilitating robust development.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-toastify"],"cli":null},"imports":["import { ToastContainer } from 'react-toastify';","import { toast } from 'react-toastify';","import type { ToastOptions } from 'react-toastify';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { ToastContainer, toast } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css'; // Optional since v11, but good for backward compatibility\n\ninterface MyToastData {\n  username: string;\n}\n\nfunction App() {\n  const [username, setUsername] = useState('');\n\n  const notify = () => {\n    toast.info(`Hello ${username || 'Guest'}! Welcome.`, {\n      position: 'top-right',\n      autoClose: 3000,\n      hideProgressBar: false,\n      closeOnClick: true,\n      pauseOnHover: true,\n      draggable: true,\n      progress: undefined,\n      theme: 'light',\n    });\n  };\n\n  const promiseNotify = () => {\n    const myPromise = new Promise<MyToastData>((resolve, reject) => {\n      setTimeout(() => {\n        if (Math.random() > 0.5) {\n          resolve({ username: 'JaneDoe' });\n        } else {\n          reject({ err: 'Failed to fetch user' });\n        }\n      }, 2000);\n    });\n\n    toast.promise(myPromise, {\n      pending: 'Fetching user data...',\n      success: {\n        render({ data }) {\n          return `User ${data?.username} fetched successfully!`;\n        }\n      },\n      error: {\n        render({ data }) {\n          return `Error: ${data?.err}`;\n        }\n      }\n    }, { autoClose: 5000 });\n  };\n\n  return (\n    <div style={{ padding: '20px' }}>\n      <h1>React-Toastify Example</h1>\n      <input\n        type=\"text\"\n        value={username}\n        onChange={(e) => setUsername(e.target.value)}\n        placeholder=\"Enter your name\"\n        style={{ marginRight: '10px', padding: '8px' }}\n      />\n      <button onClick={notify} style={{ padding: '10px 15px', cursor: 'pointer' }}>Show Basic Toast</button>\n      <button onClick={promiseNotify} style={{ marginLeft: '10px', padding: '10px 15px', cursor: 'pointer' }}>Show Promise Toast</button>\n      <ToastContainer />\n    </div>\n  );\n}\n\nexport default App;\n","lang":"typescript","description":"This example demonstrates a basic toast notification and a promise-based toast with success/error states, showcasing `ToastContainer` and `toast` utility.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}