{"id":15211,"library":"react-quick-notify","title":"React Quick Notify","description":"React Quick Notify is a modern, customizable toast notification system designed for React applications, providing a clean UI without requiring external CSS frameworks like Tailwind CSS from version 0.1.x onwards. It ships with full TypeScript support, ensuring type safety for developers. The package, currently at version 0.1.20, focuses on lightweight performance, responsiveness, and extensive customizability, including multiple toast types (success, error, warning, info), configurable positioning, auto-dismiss duration, and smooth animations. While it previously utilized Tailwind CSS, recent versions embed their own styling, simplifying integration. It offers a clear API through a `ToastProvider`, `ToastContainer`, and the `useToast` hook, making it straightforward to implement global or component-specific notifications.","status":"active","version":"0.1.20","language":"javascript","source_language":"en","source_url":"https://github.com/arshan-01/react-quick-notify","tags":["javascript","react-quick-notify","react","toast","notifications","typescript","ui","components","alerts"],"install":[{"cmd":"npm install react-quick-notify","lang":"bash","label":"npm"},{"cmd":"yarn add react-quick-notify","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-quick-notify","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for React hooks functionality.","package":"react","optional":false},{"reason":"Peer dependency required for rendering React components.","package":"react-dom","optional":false},{"reason":"Runtime dependency for rendering icons within the toast notifications.","package":"lucide-react","optional":false}],"imports":[{"note":"A named export component, essential for wrapping your application to enable toast functionality.","wrong":"const { ToastProvider } = require('react-quick-notify');","symbol":"ToastProvider","correct":"import { ToastProvider } from 'react-quick-notify';"},{"note":"A named export React hook. Do not use default import syntax. This hook provides the `toast` function to trigger notifications.","wrong":"import useToast from 'react-quick-notify';","symbol":"useToast","correct":"import { useToast } from 'react-quick-notify';"},{"note":"A named export component. Place this at the root of your app to render the toast notifications.","wrong":"import ToastContainer from 'react-quick-notify';","symbol":"ToastContainer","correct":"import { ToastContainer } from 'react-quick-notify';"},{"note":"Crucial for styling. Import this CSS file once in your main application entry point (e.g., App.tsx or index.ts/js).","symbol":"CSS Import","correct":"import 'react-quick-notify/dist/toast.css';"}],"quickstart":{"code":"import React from 'react';\nimport { ToastProvider, ToastContainer, useToast } from 'react-quick-notify';\nimport 'react-quick-notify/dist/toast.css';\n\nfunction MyComponent() {\n  const { toast } = useToast();\n\n  const handleSuccess = () => {\n    toast.success('Operation completed successfully!');\n  };\n\n  const handleError = () => {\n    toast.error('Something went wrong!');\n  };\n\n  const handleWarning = () => {\n    toast.warning('Please check your input.');\n  };\n\n  const handleInfo = () => {\n    toast.info('Here is some information.');\n  };\n\n  return (\n    <div style={{ padding: '20px', display: 'flex', gap: '10px', flexDirection: 'column' }}>\n      <h3>Toast Examples</h3>\n      <button onClick={handleSuccess}>Show Success Toast</button>\n      <button onClick={handleError}>Show Error Toast</button>\n      <button onClick={handleWarning}>Show Warning Toast</button>\n      <button onClick={handleInfo}>Show Info Toast</button>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <ToastProvider config={{ position: 'top-right', duration: 3000, maxToasts: 5, reverseOrder: true }}>\n      <div className=\"App\">\n        <MyComponent />\n        <ToastContainer />\n      </div>\n    </ToastProvider>\n  );\n}\n\nexport default App;","lang":"typescript","description":"Demonstrates setting up `ToastProvider` and `ToastContainer` at the root of a React application, and then using the `useToast` hook within a component to display different types of notifications."},"warnings":[{"fix":"Remove any Tailwind CSS configurations specific to `react-quick-notify` classes. Ensure you import the package's built-in CSS: `import 'react-quick-notify/dist/toast.css';`","message":"As of version 0.1.x, `react-quick-notify` no longer relies on Tailwind CSS for styling and now ships with its own embedded CSS. Users who previously configured Tailwind to integrate with `react-quick-notify` may need to remove those configurations.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Add `import 'react-quick-notify/dist/toast.css';` to your main application entry file (e.g., `App.tsx`, `main.ts`, or a global CSS file that's imported).","message":"The package requires a global CSS import for its styling to work correctly. Forgetting to include `import 'react-quick-notify/dist/toast.css';` will result in unstyled, dysfunctional toasts.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure your main `App` component or the root of your component tree is wrapped within `<ToastProvider>...</ToastProvider>`.","message":"The `ToastProvider` component must wrap your entire application (or the part of your application where you intend to use toasts). If `useToast` is called outside of the `ToastProvider`'s context, it will result in errors.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Place `<ToastContainer />` within your `ToastProvider` wrapper, usually as a direct child of your `App` component.","message":"The `ToastContainer` component must be placed at a high level in your React component tree (typically near the root, inside the `ToastProvider`). Without it, toasts will be created but will not be rendered on the screen.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Install `lucide-react` alongside `react-quick-notify`: `npm install lucide-react` or `yarn add lucide-react`.","message":"The `lucide-react` package is a required peer dependency for `react-quick-notify` to render icons within its toast components. If not installed, you might encounter runtime errors related to missing components or undefined references.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Wrap your application, or at least the part where toasts are used, with the `<ToastProvider>...</ToastProvider>` component.","cause":"Attempting to use the `useToast` hook outside of a `ToastProvider`'s context.","error":"Cannot read properties of undefined (reading 'toast')"},{"fix":"Add `import 'react-quick-notify/dist/toast.css';` to your application's main entry file (e.g., `src/main.tsx` or `src/App.tsx`).","cause":"The necessary CSS file from `react-quick-notify` has not been imported into your application.","error":"Toasts are appearing but have no styling, or look like plain text."},{"fix":"Ensure you are using named imports for all `react-quick-notify` components and hooks: `import { ToastProvider, ToastContainer, useToast } from 'react-quick-notify';`","cause":"Incorrect import syntax (e.g., using `require()` or incorrect named/default imports) in an ESM environment or for a package designed with named exports.","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."},{"fix":"Ensure `useToast` is only called directly inside a React functional component or a custom hook. Also, verify that `react` and `react-dom` are correctly installed and matching the `react-quick-notify` peer dependency requirements (>=16.8.0).","cause":"Attempting to use `useToast` outside a React functional component, or within a class component, or a misconfigured React environment.","error":"TypeError: Cannot read properties of null (reading 'useContext') or Invalid hook call. Hooks can only be called inside of the body of a function component."}],"ecosystem":"npm"}