Registry / web-framework / react-quick-notify

react-quick-notify

library0.1.20jsnpmunverified

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.

web-framework

npm install react-quick-notify

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-QUICK-NOTIFY

react-quick-notify

web-frameworkjavascriptv0.1.20

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ToastProvider

✓ import { ToastProvider } from 'react-quick-notify';

✗ const { ToastProvider } = require('react-quick-notify');

A named export component, essential for wrapping your application to enable toast functionality.

useToast

✓ import { useToast } from 'react-quick-notify';

✗ import useToast from 'react-quick-notify';

A named export React hook. Do not use default import syntax. This hook provides the `toast` function to trigger notifications.

ToastContainer

✓ import { ToastContainer } from 'react-quick-notify';

✗ import ToastContainer from 'react-quick-notify';

A named export component. Place this at the root of your app to render the toast notifications.

CSS Import

✓ import 'react-quick-notify/dist/toast.css';

Crucial for styling. Import this CSS file once in your main application entry point (e.g., App.tsx or index.ts/js).

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.

import React from 'react'; import { ToastProvider, ToastContainer, useToast } from 'react-quick-notify'; import 'react-quick-notify/dist/toast.css'; function MyComponent() { const { toast } = useToast(); const handleSuccess = () => { toast.success('Operation completed successfully!'); }; const handleError = () => { toast.error('Something went wrong!'); }; const handleWarning = () => { toast.warning('Please check your input.'); }; const handleInfo = () => { toast.info('Here is some information.'); }; return ( <div style={{ padding: '20px', display: 'flex', gap: '10px', flexDirection: 'column' }}> <h3>Toast Examples</h3> <button onClick={handleSuccess}>Show Success Toast</button> <button onClick={handleError}>Show Error Toast</button> <button onClick={handleWarning}>Show Warning Toast</button> <button onClick={handleInfo}>Show Info Toast</button> </div> ); } function App() { return ( <ToastProvider config={{ position: 'top-right', duration: 3000, maxToasts: 5, reverseOrder: true }}> <div className="App"> <MyComponent /> <ToastContainer /> </div> </ToastProvider> ); } export default App;

Debug

Known issues

breakingAs 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.

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';`

affects: >=0.1.0

gotchaThe 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.

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).

affects: >=0.1.0

gotchaThe `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.

fix

Ensure your main `App` component or the root of your component tree is wrapped within `<ToastProvider>...</ToastProvider>`.

affects: >=0.1.0

gotchaThe `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.

fix

Place `<ToastContainer />` within your `ToastProvider` wrapper, usually as a direct child of your `App` component.

affects: >=0.1.0

gotchaThe `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.

fix

Install `lucide-react` alongside `react-quick-notify`: `npm install lucide-react` or `yarn add lucide-react`.

affects: >=0.1.0

Errors

Common errors & fixes

Cannot read properties of undefined (reading 'toast')

Attempting to use the `useToast` hook outside of a `ToastProvider`'s context.

fix

Wrap your application, or at least the part where toasts are used, with the `<ToastProvider>...</ToastProvider>` component.

Toasts are appearing but have no styling, or look like plain text.

The necessary CSS file from `react-quick-notify` has not been imported into your application.

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`).

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.

Incorrect import syntax (e.g., using `require()` or incorrect named/default imports) in an ESM environment or for a package designed with named exports.

fix

Ensure you are using named imports for all `react-quick-notify` components and hooks: `import { ToastProvider, ToastContainer, useToast } from 'react-quick-notify';`

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.

Attempting to use `useToast` outside a React functional component, or within a class component, or a misconfigured React environment.

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).

Upgrade

Version history

0.1.20latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for React hooks functionality.

react-domrequiredPeer dependency required for rendering React components.

lucide-reactrequiredRuntime dependency for rendering icons within the toast notifications.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/arshan-01/react-quick-notify ↗

packagehttps://www.npmjs.com/package/react-quick-notify ↗

homepagehttps://react-quick-notify.vercel.app ↗