React Quick Notify

Common errors

• Cannot read properties of undefined (reading 'toast')

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

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

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

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

Warnings

• breaking 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.
  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';`
• gotcha 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.
  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).
• gotcha 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.
  Fix: Ensure your main `App` component or the root of your component tree is wrapped within `<ToastProvider>...</ToastProvider>`.
• gotcha 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.
  Fix: Place `<ToastContainer />` within your `ToastProvider` wrapper, usually as a direct child of your `App` component.
• gotcha 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.
  Fix: Install `lucide-react` alongside `react-quick-notify`: `npm install lucide-react` or `yarn add lucide-react`.

Install

• npm install react-quick-notify npm
• yarn add react-quick-notify yarn
• pnpm add react-quick-notify pnpm

Imports

• ToastProvider
  wrong:

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

  correct:

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

  A named export component, essential for wrapping your application to enable toast functionality.
• useToast
  wrong:

  import useToast from 'react-quick-notify';

  correct:

  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
  wrong:

  import ToastContainer from 'react-quick-notify';

  correct:

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

Quickstart

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;