Forem: James Parker

Getting Started with React Tooltip: Adding Tooltips to Your Components

James Parker — Mon, 19 Jan 2026 16:40:00 +0000

React Tooltip is a simple and flexible library for adding tooltips to React components. It provides an easy way to display helpful information when users hover over or focus on elements, improving the user experience with contextual hints and descriptions. This guide walks through setting up and creating tooltips using React Tooltip with React, from installation to a working implementation. This is part 40 of a series on using React Tooltip with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React components
Familiarity with JavaScript/TypeScript

Installation

Install React Tooltip using your preferred package manager:

npm install react-tooltip

Or with yarn:

yarn add react-tooltip

Or with pnpm:

pnpm add react-tooltip

After installation, your package.json should include:

{
  "dependencies": {
    "react-tooltip": "^5.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Tooltip requires minimal setup. Import the CSS file in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'react-tooltip/dist/react-tooltip.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple tooltip example. Create a new file src/TooltipExample.jsx:

// src/TooltipExample.jsx
import React from 'react';
import { Tooltip } from 'react-tooltip';

function TooltipExample() {
  return (
    <div style={{ padding: '50px', textAlign: 'center' }}>
      <h2>Tooltip Examples</h2>
      <div style={{ display: 'flex', gap: '20px', justifyContent: 'center', marginTop: '30px' }}>
        <button
          data-tooltip-id="my-tooltip"
          data-tooltip-content="This is a helpful tooltip!"
          style={{
            padding: '10px 20px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Hover me
        </button>
        <Tooltip id="my-tooltip" />
      </div>
    </div>
  );
}

export default TooltipExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import TooltipExample from './TooltipExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <TooltipExample />
    </div>
  );
}

export default App;

This creates a basic tooltip that appears when you hover over the button.

Understanding the Basics

React Tooltip uses data attributes to connect elements with tooltips:

data-tooltip-id: Links the element to a specific tooltip
data-tooltip-content: The text content to display in the tooltip
Tooltip component: Renders the tooltip with the matching ID
Automatic positioning: Tooltips automatically position themselves

Key concepts:

Tooltip ID: Each tooltip needs a unique ID that matches the data-tooltip-id attribute
Data Attributes: Use data-tooltip-id and data-tooltip-content to connect elements to tooltips
Tooltip Component: Render <Tooltip id="..." /> for each tooltip you want to use
Hover/Focus: Tooltips appear on hover or focus by default
Positioning: Tooltips automatically position themselves to stay visible

Here's an example with multiple tooltips and different positions:

// src/MultipleTooltipsExample.jsx
import React from 'react';
import { Tooltip } from 'react-tooltip';

function MultipleTooltipsExample() {
  return (
    <div style={{ padding: '50px' }}>
      <h2>Multiple Tooltips</h2>
      <div style={{ display: 'flex', gap: '20px', marginTop: '30px' }}>
        <button
          data-tooltip-id="tooltip-1"
          data-tooltip-content="This is tooltip 1"
          style={{
            padding: '10px 20px',
            backgroundColor: '#28a745',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Button 1
        </button>
        <button
          data-tooltip-id="tooltip-2"
          data-tooltip-content="This is tooltip 2"
          style={{
            padding: '10px 20px',
            backgroundColor: '#dc3545',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Button 2
        </button>
        <button
          data-tooltip-id="tooltip-3"
          data-tooltip-content="This is tooltip 3"
          data-tooltip-place="bottom"
          style={{
            padding: '10px 20px',
            backgroundColor: '#ffc107',
            color: 'black',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Button 3 (Bottom)
        </button>
      </div>
      <Tooltip id="tooltip-1" />
      <Tooltip id="tooltip-2" />
      <Tooltip id="tooltip-3" />
    </div>
  );
}

export default MultipleTooltipsExample;

Practical Example / Building Something Real

Let's build a form component with helpful tooltips:

// src/FormWithTooltips.jsx
import React, { useState } from 'react';
import { Tooltip } from 'react-tooltip';

function FormWithTooltips() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted:', formData);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '500px', margin: '0 auto' }}>
      <h2>Registration Form with Tooltips</h2>
      <form onSubmit={handleSubmit}>
        <div style={{ marginBottom: '20px' }}>
          <label
            htmlFor="username"
            style={{
              display: 'block',
              marginBottom: '5px',
              fontWeight: '500'
            }}
          >
            Username
            <span
              data-tooltip-id="username-tooltip"
              data-tooltip-content="Username must be 3-20 characters long and contain only letters, numbers, and underscores"
              style={{
                marginLeft: '5px',
                color: '#007bff',
                cursor: 'help',
                fontSize: '14px'
              }}
            >
              ℹ️
            </span>
          </label>
          <input
            type="text"
            id="username"
            name="username"
            value={formData.username}
            onChange={handleInputChange}
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              fontSize: '14px',
              boxSizing: 'border-box'
            }}
          />
          <Tooltip id="username-tooltip" />
        </div>

        <div style={{ marginBottom: '20px' }}>
          <label
            htmlFor="email"
            style={{
              display: 'block',
              marginBottom: '5px',
              fontWeight: '500'
            }}
          >
            Email
            <span
              data-tooltip-id="email-tooltip"
              data-tooltip-content="Enter a valid email address. We'll use this to send you important updates."
              style={{
                marginLeft: '5px',
                color: '#007bff',
                cursor: 'help',
                fontSize: '14px'
              }}
            >
              ℹ️
            </span>
          </label>
          <input
            type="email"
            id="email"
            name="email"
            value={formData.email}
            onChange={handleInputChange}
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              fontSize: '14px',
              boxSizing: 'border-box'
            }}
          />
          <Tooltip id="email-tooltip" />
        </div>

        <div style={{ marginBottom: '20px' }}>
          <label
            htmlFor="password"
            style={{
              display: 'block',
              marginBottom: '5px',
              fontWeight: '500'
            }}
          >
            Password
            <span
              data-tooltip-id="password-tooltip"
              data-tooltip-content="Password must be at least 8 characters long and include uppercase, lowercase, number, and special character"
              style={{
                marginLeft: '5px',
                color: '#007bff',
                cursor: 'help',
                fontSize: '14px'
              }}
            >
              ℹ️
            </span>
          </label>
          <input
            type="password"
            id="password"
            name="password"
            value={formData.password}
            onChange={handleInputChange}
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              fontSize: '14px',
              boxSizing: 'border-box'
            }}
          />
          <Tooltip id="password-tooltip" />
        </div>

        <button
          type="submit"
          style={{
            width: '100%',
            padding: '10px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '16px'
          }}
        >
          Submit
        </button>
      </form>
    </div>
  );
}

export default FormWithTooltips;

Now create a component with icon tooltips:

// src/IconTooltipsExample.jsx
import React from 'react';
import { Tooltip } from 'react-tooltip';

function IconTooltipsExample() {
  return (
    <div style={{ padding: '50px', textAlign: 'center' }}>
      <h2>Icon Tooltips</h2>
      <div style={{ display: 'flex', gap: '30px', justifyContent: 'center', marginTop: '30px' }}>
        <div
          data-tooltip-id="save-tooltip"
          data-tooltip-content="Save your work"
          style={{
            width: '50px',
            height: '50px',
            backgroundColor: '#28a745',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            cursor: 'pointer',
            fontSize: '24px'
          }}
        >
          💾
        </div>
        <div
          data-tooltip-id="delete-tooltip"
          data-tooltip-content="Delete this item"
          style={{
            width: '50px',
            height: '50px',
            backgroundColor: '#dc3545',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            cursor: 'pointer',
            fontSize: '24px'
          }}
        >
          🗑️
        </div>
        <div
          data-tooltip-id="edit-tooltip"
          data-tooltip-content="Edit this item"
          style={{
            width: '50px',
            height: '50px',
            backgroundColor: '#ffc107',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            cursor: 'pointer',
            fontSize: '24px'
          }}
        >
          ✏️
        </div>
      </div>
      <Tooltip id="save-tooltip" />
      <Tooltip id="delete-tooltip" />
      <Tooltip id="edit-tooltip" />
    </div>
  );
}

export default IconTooltipsExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import FormWithTooltips from './FormWithTooltips';
import IconTooltipsExample from './IconTooltipsExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <FormWithTooltips />
      <IconTooltipsExample />
    </div>
  );
}

export default App;

This example demonstrates:

Form fields with helpful tooltips
Icon buttons with tooltips
Multiple tooltips on the same page
Different tooltip positions
Accessible tooltip implementation

Common Issues / Troubleshooting

Tooltips not displaying: Make sure you've imported the CSS file (import 'react-tooltip/dist/react-tooltip.css'). Also ensure the Tooltip component is rendered with the correct ID matching the data-tooltip-id attribute.
Tooltip ID mismatch: The data-tooltip-id attribute must exactly match the id prop on the Tooltip component. Check for typos or case sensitivity issues.
Tooltips not appearing on hover: Ensure the element with data-tooltip-id is interactive (button, link, or has appropriate event handlers). Some elements may need cursor: pointer style.
Tooltip positioning issues: Use the data-tooltip-place attribute to control positioning. Available values: 'top', 'right', 'bottom', 'left'. The tooltip will automatically adjust if it would go off-screen.
Multiple tooltips: Each tooltip needs its own unique ID and corresponding Tooltip component. You can reuse the same tooltip ID on multiple elements if they should show the same content.
Styling conflicts: If tooltips don't look right, check for CSS conflicts. You can override tooltip styles using the className prop on the Tooltip component.

Next Steps

Now that you have a basic understanding of React Tooltip:

Learn about advanced positioning options
Explore custom styling and theming
Implement dynamic tooltip content
Add tooltips to complex components
Learn about accessibility features
Learn about other tooltip libraries (react-tooltip, @floating-ui/react)
Check the official repository: https://github.com/wwayne/react-tooltip
Look for part 41 of this series for more advanced topics

Summary

You've successfully set up React Tooltip in your React application and created tooltips for form fields and icon buttons. React Tooltip provides a simple, accessible way to add helpful hints and contextual information to your UI elements.

SEO Keywords

react-tooltip
React tooltip library
react-tooltip tutorial
React hover tooltips
react-tooltip installation
React tooltip component
react-tooltip example
React form tooltips
react-tooltip setup
React tooltip positioning
react-tooltip customization
React accessibility tooltips
react-tooltip data attributes
React tooltip library
react-tooltip getting started

Advanced Toast Notifications with Sonner in React

James Parker — Mon, 19 Jan 2026 16:38:26 +0000

Sonner is an opinionated toast component library for React that provides beautiful, customizable toast notifications with a focus on developer experience and performance. It offers advanced features like promise handling, custom JSX content, rich styling options, and excellent TypeScript support. This guide walks through advanced usage of Sonner with React, including custom configurations, promise handling, and complex notification patterns. This is part 39 of a series on using Sonner with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useCallback)
Familiarity with async/await and Promises
Understanding of TypeScript (optional but recommended)
Understanding of CSS for styling

Installation

Install Sonner using your preferred package manager:

npm install sonner

Or with yarn:

yarn add sonner

Or with pnpm:

pnpm add sonner

After installation, your package.json should include:

{
  "dependencies": {
    "sonner": "^1.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Set up the Toaster component in your main entry file or App component:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Toaster } from 'sonner';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
    <Toaster />
  </React.StrictMode>
);

Or add it to your App component:

// src/App.jsx
import React from 'react';
import { Toaster } from 'sonner';
import './App.css';

function App() {
  return (
    <div className="App">
      <Toaster />
      {/* Your app content */}
    </div>
  );
}

export default App;

First Example / Basic Usage

Let's create a simple toast notification component. Create a new file src/ToastExample.jsx:

// src/ToastExample.jsx
import React from 'react';
import { toast } from 'sonner';

function ToastExample() {
  const showSuccess = () => {
    toast.success('Operation completed successfully!');
  };

  const showError = () => {
    toast.error('Something went wrong!');
  };

  const showInfo = () => {
    toast.info('Here is some information.');
  };

  const showWarning = () => {
    toast.warning('Please review your input.');
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Toast Notification Examples</h2>
      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
        <button onClick={showSuccess}>Success</button>
        <button onClick={showError}>Error</button>
        <button onClick={showInfo}>Info</button>
        <button onClick={showWarning}>Warning</button>
      </div>
    </div>
  );
}

export default ToastExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import { Toaster } from 'sonner';
import ToastExample from './ToastExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <ToastExample />
      <Toaster />
    </div>
  );
}

export default App;

Understanding the Basics

Sonner provides several key features:

toast.success: Show a success toast
toast.error: Show an error toast
toast.info: Show an info toast
toast.warning: Show a warning toast
toast.promise: Handle promises with automatic loading/success/error states
toast.custom: Show custom JSX content
Toaster: Component that renders all toasts
Rich Colors: Automatic color theming for different toast types
TypeScript: Full TypeScript support

Key concepts for advanced usage:

Promise Handling: Use toast.promise for async operations
Custom JSX: Pass React components as toast content
Styling: Extensive styling options with inline styles and class names
Global Configuration: Configure default options on the Toaster component
Action Buttons: Add action buttons to toasts

Here's an example with promise handling and custom content:

// src/AdvancedToastExample.jsx
import React from 'react';
import { toast } from 'sonner';

function AdvancedToastExample() {
  const showPromiseToast = () => {
    const fetchData = () => 
      fetch('/api/data')
        .then(response => {
          if (!response.ok) throw new Error('Network error');
          return response.json();
        });

    toast.promise(fetchData, {
      loading: 'Loading data...',
      success: (data) => ({
        title: 'Data loaded!',
        description: `Loaded ${data.items?.length || 0} items`,
        duration: 5000,
      }),
      error: (error) => ({
        title: 'Failed to load data',
        description: error.message,
      }),
    });
  };

  const showCustomJSX = () => {
    toast.custom((t) => (
      <div
        style={{
          background: 'white',
          padding: '16px',
          borderRadius: '8px',
          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
          opacity: t.visible ? 1 : 0,
          transition: 'opacity 0.3s',
        }}
      >
        <strong>Custom JSX Toast</strong>
        <p>This is a custom toast with JSX content.</p>
        <button onClick={() => toast.dismiss(t.id)}>Close</button>
      </div>
    ));
  };

  const showStyledToast = () => {
    toast('Custom styled toast', {
      style: {
        background: '#1e40af',
        color: 'white',
        border: '2px solid #3b82f6',
      },
      className: 'my-custom-toast',
    });
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Advanced Toast Examples</h2>
      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
        <button onClick={showPromiseToast}>Promise Toast</button>
        <button onClick={showCustomJSX}>Custom JSX</button>
        <button onClick={showStyledToast}>Styled Toast</button>
      </div>
    </div>
  );
}

export default AdvancedToastExample;

Practical Example / Building Something Real

Let's build a comprehensive notification system with custom hooks, promise handling, and advanced features:

// src/hooks/useToastNotifications.js
import { useCallback } from 'react';
import { toast } from 'sonner';

export const useToastNotifications = () => {
  const showSuccess = useCallback((title, description, options = {}) => {
    toast.success(title, {
      description,
      duration: 3000,
      ...options
    });
  }, []);

  const showError = useCallback((title, description, options = {}) => {
    toast.error(title, {
      description,
      duration: 5000,
      ...options
    });
  }, []);

  const showPromise = useCallback((promise, messages) => {
    return toast.promise(promise, {
      loading: messages.loading || 'Loading...',
      success: messages.success || 'Success!',
      error: messages.error || 'Error occurred',
      ...messages
    });
  }, []);

  const showCustom = useCallback((content, options = {}) => {
    return toast.custom(content, options);
  }, []);

  const dismiss = useCallback((toastId) => {
    toast.dismiss(toastId);
  }, []);

  return {
    showSuccess,
    showError,
    showPromise,
    showCustom,
    dismiss
  };
};

Now create an advanced notification system component:

// src/AdvancedToastSystem.jsx
import React, { useState } from 'react';
import { useToastNotifications } from './hooks/useToastNotifications';
import { toast } from 'sonner';

function AdvancedToastSystem() {
  const { showSuccess, showError, showPromise, showCustom, dismiss } = useToastNotifications();
  const [formData, setFormData] = useState({
    title: '',
    description: '',
    type: 'success'
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!formData.title) {
      showError('Validation Error', 'Please enter a title.');
      return;
    }

    switch (formData.type) {
      case 'success':
        showSuccess(formData.title, formData.description);
        break;
      case 'error':
        showError(formData.title, formData.description);
        break;
      default:
        showSuccess(formData.title, formData.description);
    }

    setFormData({ title: '', description: '', type: 'success' });
  };

  const handlePromiseOperation = () => {
    const fetchUser = () => 
      fetch('https://api.example.com/user')
        .then(response => {
          if (!response.ok) throw new Error('Network error');
          return response.json();
        });

    showPromise(fetchUser, {
      loading: 'Loading user...',
      success: (data) => ({
        title: `Welcome ${data.name}!`,
        description: data.email,
        duration: 5000,
      }),
      error: (error) => ({
        title: 'Failed to load user',
        description: error.message,
      }),
    });
  };

  const showActionToast = () => {
    toast('Item will be deleted', {
      action: {
        label: 'Undo',
        onClick: () => {
          showSuccess('Action cancelled', 'The item was not deleted.');
        },
      },
      cancel: {
        label: 'Cancel',
        onClick: () => {
          toast.dismiss();
        },
      },
    });
  };

  const showCustomContent = () => {
    showCustom(
      (t) => (
        <div
          style={{
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            color: 'white',
            padding: '20px',
            borderRadius: '12px',
            boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
            opacity: t.visible ? 1 : 0,
            transition: 'opacity 0.3s',
            minWidth: '300px',
          }}
        >
          <h3 style={{ margin: '0 0 8px 0' }}>Custom Toast</h3>
          <p style={{ margin: 0, opacity: 0.9 }}>
            This is a completely custom toast with gradient background.
          </p>
          <button
            onClick={() => dismiss(t.id)}
            style={{
              marginTop: '12px',
              padding: '6px 12px',
              background: 'rgba(255, 255, 255, 0.2)',
              border: '1px solid rgba(255, 255, 255, 0.3)',
              borderRadius: '6px',
              color: 'white',
              cursor: 'pointer',
            }}
          >
            Close
          </button>
        </div>
      ),
      {
        duration: Infinity,
      }
    );
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h1>Advanced Toast System</h1>

      <form onSubmit={handleSubmit} style={{ marginBottom: '20px', padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
        <div style={{ marginBottom: '16px' }}>
          <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
            Title *
          </label>
          <input
            type="text"
            name="title"
            value={formData.title}
            onChange={handleInputChange}
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              boxSizing: 'border-box'
            }}
            required
          />
        </div>

        <div style={{ marginBottom: '16px' }}>
          <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
            Description
          </label>
          <textarea
            name="description"
            value={formData.description}
            onChange={handleInputChange}
            rows={2}
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              boxSizing: 'border-box',
              resize: 'vertical'
            }}
          />
        </div>

        <div style={{ marginBottom: '16px' }}>
          <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
            Type
          </label>
          <select
            name="type"
            value={formData.type}
            onChange={handleInputChange}
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              boxSizing: 'border-box'
            }}
          >
            <option value="success">Success</option>
            <option value="error">Error</option>
          </select>
        </div>

        <button
          type="submit"
          style={{
            width: '100%',
            padding: '10px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '16px'
          }}
        >
          Show Toast
        </button>
      </form>

      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        <button
          onClick={handlePromiseOperation}
          style={{
            padding: '10px',
            backgroundColor: '#28a745',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Promise Operation
        </button>
        <button
          onClick={showActionToast}
          style={{
            padding: '10px',
            backgroundColor: '#ffc107',
            color: 'black',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Action Toast
        </button>
        <button
          onClick={showCustomContent}
          style={{
            padding: '10px',
            backgroundColor: '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Custom Content Toast
        </button>
      </div>
    </div>
  );
}

export default AdvancedToastSystem;

Update your App.jsx with custom Toaster configuration:

// src/App.jsx
import React from 'react';
import { Toaster } from 'sonner';
import AdvancedToastSystem from './AdvancedToastSystem';
import './App.css';

function App() {
  return (
    <div className="App">
      <AdvancedToastSystem />
      <Toaster
        position="top-right"
        duration={4000}
        visibleToasts={5}
        expand={true}
        richColors={true}
        closeButton={true}
        toastOptions={{
          className: 'my-toast',
          style: {
            background: 'white',
            color: 'black',
          },
        }}
      />
    </div>
  );
}

export default App;

Common Issues / Troubleshooting

Toasts not displaying: Ensure Toaster component is rendered in your app. It should be placed at the root level, typically in your main App component or index file.
Promise toasts not working: Make sure the promise is properly structured. toast.promise automatically handles loading, success, and error states based on the promise outcome. The promise can be a function that returns a promise or a promise directly.
Custom JSX not rendering: When using toast.custom, the function receives a toast object with properties like id and visible. Use these to control the toast's visibility and dismissal.
Styling not applying: Use the style prop for inline styles or className for CSS classes. For global styles, use toastOptions on the Toaster component.
Action buttons not working: Action buttons are defined in the action property of toast options. The onClick handler receives the toast ID for programmatic dismissal.
TypeScript errors: Sonner has excellent TypeScript support. Make sure you're using the correct types for toast options and promise handlers.

Next Steps

Now that you have an advanced understanding of Sonner:

Explore advanced customization options and themes
Learn about different toast positions and animations
Implement toast queues and limits
Add custom toast components with JSX
Integrate with React Context for global toast management
Learn about TypeScript integration and type safety
Learn about other toast libraries (react-hot-toast, notistack)
Check the official documentation: https://sonner.emilkowal.ski/
Look for part 40 of this series for more advanced topics

Summary

You've successfully integrated Sonner into your React application with advanced features including promise handling, custom JSX content, action buttons, and comprehensive styling options. Sonner provides an opinionated, beautiful solution for displaying toast notifications with excellent developer experience.

SEO Keywords

sonner
React toast notifications
sonner tutorial
React notification library
sonner installation
React toast messages
sonner example
React alert notifications
sonner setup
React toast hooks
sonner customization
React notification system
sonner promise
React toast library
sonner getting started

Building Toast Notification Systems with react-hot-toast in React

James Parker — Mon, 19 Jan 2026 16:37:24 +0000

react-hot-toast is a lightweight, customizable, and beautiful toast notification library for React applications. It provides a simple API with zero configuration needed, beautiful animations, and extensive customization options. This guide walks through setting up and creating toast notification systems using react-hot-toast with React, from installation to a working implementation. This is part 38 of a series on using react-hot-toast with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useCallback)
Familiarity with JavaScript/TypeScript
Understanding of CSS for styling

Installation

Install react-hot-toast using your preferred package manager:

npm install react-hot-toast

Or with yarn:

yarn add react-hot-toast

Or with pnpm:

pnpm add react-hot-toast

After installation, your package.json should include:

{
  "dependencies": {
    "react-hot-toast": "^2.4.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Set up the Toaster component in your main entry file or App component:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Toaster } from 'react-hot-toast';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
    <Toaster />
  </React.StrictMode>
);

Or add it to your App component:

// src/App.jsx
import React from 'react';
import { Toaster } from 'react-hot-toast';
import './App.css';

function App() {
  return (
    <div className="App">
      <Toaster />
      {/* Your app content */}
    </div>
  );
}

export default App;

First Example / Basic Usage

Let's create a simple toast notification component. Create a new file src/ToastExample.jsx:

// src/ToastExample.jsx
import React from 'react';
import toast from 'react-hot-toast';

function ToastExample() {
  const showSuccess = () => {
    toast.success('Operation completed successfully!');
  };

  const showError = () => {
    toast.error('Something went wrong!');
  };

  const showInfo = () => {
    toast('Here is some information.', {
      icon: 'ℹ️'
    });
  };

  const showLoading = () => {
    toast.loading('Processing...');
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Toast Notification Examples</h2>
      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
        <button onClick={showSuccess}>Success</button>
        <button onClick={showError}>Error</button>
        <button onClick={showInfo}>Info</button>
        <button onClick={showLoading}>Loading</button>
      </div>
    </div>
  );
}

export default ToastExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import { Toaster } from 'react-hot-toast';
import ToastExample from './ToastExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <ToastExample />
      <Toaster />
    </div>
  );
}

export default App;

This creates basic toast notifications that appear when you click the buttons and automatically disappear after a few seconds.

Understanding the Basics

react-hot-toast provides several key features:

toast.success: Show a success toast
toast.error: Show an error toast
toast.loading: Show a loading toast
toast.custom: Show a custom toast with JSX
toast.promise: Handle promises with automatic loading/success/error states
Toaster: Component that renders all toasts
Positioning: Customizable toast positions
Customization: Extensive styling and behavior options

Key concepts:

Toaster Component: Toaster must be rendered in your app to display toasts
Toast API: Use the toast object to show different types of toasts
Automatic Dismissal: Toasts automatically disappear after a set duration
Positioning: Toasts can be positioned in different corners
Customization: Toast appearance and behavior can be customized with options

Here's an example with custom options and promise handling:

// src/AdvancedToastExample.jsx
import React from 'react';
import toast from 'react-hot-toast';

function AdvancedToastExample() {
  const showCustomToast = () => {
    toast('Custom toast message', {
      duration: 5000,
      position: 'top-center',
      style: {
        border: '1px solid #713200',
        padding: '16px',
        color: '#713200',
      },
      icon: '👏',
    });
  };

  const showPromiseToast = () => {
    const myPromise = new Promise((resolve, reject) => {
      setTimeout(() => {
        Math.random() > 0.5 ? resolve('Success!') : reject('Error!');
      }, 2000);
    });

    toast.promise(myPromise, {
      loading: 'Processing...',
      success: 'Operation completed!',
      error: 'Operation failed!',
    });
  };

  const showCustomJSX = () => {
    toast.custom((t) => (
      <div
        style={{
          background: 'white',
          padding: '16px',
          borderRadius: '8px',
          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
          opacity: t.visible ? 1 : 0,
          transition: 'opacity 0.3s',
        }}
      >
        <strong>Custom JSX Toast</strong>
        <p>This is a custom toast with JSX content.</p>
        <button onClick={() => toast.dismiss(t.id)}>Close</button>
      </div>
    ));
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Advanced Toast Examples</h2>
      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
        <button onClick={showCustomToast}>Custom Toast</button>
        <button onClick={showPromiseToast}>Promise Toast</button>
        <button onClick={showCustomJSX}>Custom JSX</button>
      </div>
    </div>
  );
}

export default AdvancedToastExample;

Practical Example / Building Something Real

Let's build a comprehensive notification system with custom hooks and different notification patterns:

// src/hooks/useToastNotifications.js
import { useCallback } from 'react';
import toast from 'react-hot-toast';

export const useToastNotifications = () => {
  const showSuccess = useCallback((message, options = {}) => {
    toast.success(message, {
      duration: 3000,
      position: 'top-right',
      ...options
    });
  }, []);

  const showError = useCallback((message, options = {}) => {
    toast.error(message, {
      duration: 5000,
      position: 'top-right',
      ...options
    });
  }, []);

  const showLoading = useCallback((message) => {
    return toast.loading(message, {
      position: 'top-right'
    });
  }, []);

  const showPromise = useCallback((promise, messages) => {
    return toast.promise(promise, messages, {
      position: 'top-right'
    });
  }, []);

  const dismiss = useCallback((toastId) => {
    toast.dismiss(toastId);
  }, []);

  return {
    showSuccess,
    showError,
    showLoading,
    showPromise,
    dismiss
  };
};

Now create an advanced notification system component:

// src/AdvancedToastSystem.jsx
import React, { useState } from 'react';
import { useToastNotifications } from './hooks/useToastNotifications';
import toast from 'react-hot-toast';

function AdvancedToastSystem() {
  const { showSuccess, showError, showLoading, showPromise, dismiss } = useToastNotifications();
  const [formData, setFormData] = useState({
    message: '',
    type: 'success'
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!formData.message) {
      showError('Please enter a message.');
      return;
    }

    switch (formData.type) {
      case 'success':
        showSuccess(formData.message);
        break;
      case 'error':
        showError(formData.message);
        break;
      default:
        showSuccess(formData.message);
    }

    setFormData({ message: '', type: 'success' });
  };

  const simulateApiCall = async () => {
    const loadingId = showLoading('Processing your request...');

    try {
      await new Promise(resolve => setTimeout(resolve, 2000));
      dismiss(loadingId);
      showSuccess('Operation completed successfully!');
    } catch (error) {
      dismiss(loadingId);
      showError('Failed to complete operation. Please try again.');
    }
  };

  const handlePromiseOperation = () => {
    const myPromise = fetch('https://api.example.com/data')
      .then(response => {
        if (!response.ok) throw new Error('Network error');
        return response.json();
      });

    showPromise(myPromise, {
      loading: 'Loading data...',
      success: 'Data loaded successfully!',
      error: 'Failed to load data.'
    });
  };

  const showCustomStyled = () => {
    toast('Custom styled toast', {
      style: {
        border: '2px solid #007bff',
        padding: '16px',
        color: '#007bff',
        borderRadius: '8px',
        fontSize: '16px',
        fontWeight: '500'
      },
      icon: '🎨',
      duration: 4000
    });
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h1>Advanced Toast System</h1>

      <form onSubmit={handleSubmit} style={{ marginBottom: '20px', padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
        <div style={{ marginBottom: '16px' }}>
          <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
            Message *
          </label>
          <input
            type="text"
            name="message"
            value={formData.message}
            onChange={handleInputChange}
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              boxSizing: 'border-box'
            }}
            required
          />
        </div>

        <div style={{ marginBottom: '16px' }}>
          <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
            Type
          </label>
          <select
            name="type"
            value={formData.type}
            onChange={handleInputChange}
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              boxSizing: 'border-box'
            }}
          >
            <option value="success">Success</option>
            <option value="error">Error</option>
          </select>
        </div>

        <button
          type="submit"
          style={{
            width: '100%',
            padding: '10px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '16px'
          }}
        >
          Show Toast
        </button>
      </form>

      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        <button
          onClick={simulateApiCall}
          style={{
            padding: '10px',
            backgroundColor: '#28a745',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Simulate API Call
        </button>
        <button
          onClick={handlePromiseOperation}
          style={{
            padding: '10px',
            backgroundColor: '#ffc107',
            color: 'black',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Promise Operation
        </button>
        <button
          onClick={showCustomStyled}
          style={{
            padding: '10px',
            backgroundColor: '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Custom Styled Toast
        </button>
      </div>
    </div>
  );
}

export default AdvancedToastSystem;

Update your App.jsx with custom Toaster configuration:

// src/App.jsx
import React from 'react';
import { Toaster } from 'react-hot-toast';
import AdvancedToastSystem from './AdvancedToastSystem';
import './App.css';

function App() {
  return (
    <div className="App">
      <AdvancedToastSystem />
      <Toaster
        position="top-right"
        toastOptions={{
          duration: 4000,
          style: {
            background: '#363636',
            color: '#fff',
          },
          success: {
            duration: 3000,
            iconTheme: {
              primary: '#4ade80',
              secondary: '#fff',
            },
          },
          error: {
            duration: 5000,
            iconTheme: {
              primary: '#ef4444',
              secondary: '#fff',
            },
          },
        }}
      />
    </div>
  );
}

export default App;

Common Issues / Troubleshooting

Toasts not displaying: Ensure Toaster component is rendered in your app. It should be placed at the root level, typically in your main App component or index file.
Toasts appearing in wrong position: Use the position prop on the Toaster component or pass it in toast options. Available positions include 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'.
Toasts not auto-dismissing: Check the duration option. Set a duration in milliseconds (e.g., 3000 for 3 seconds). Set duration: Infinity for persistent toasts.
Custom styling not working: Use the style or className options when calling toast functions. For global styles, use toastOptions on the Toaster component.
Promise toasts not working: Make sure the promise is properly structured. toast.promise automatically handles loading, success, and error states based on the promise outcome.
Multiple toasts stacking: react-hot-toast handles multiple toasts automatically. They will stack based on the position setting. Use toast.dismiss() to dismiss all toasts or pass a specific toast ID.

Next Steps

Now that you have an understanding of react-hot-toast:

Explore advanced customization options and themes
Learn about different toast positions and animations
Implement toast queues and limits
Add custom toast components with JSX
Integrate with React Context for global toast management
Learn about other toast libraries (notistack, react-toastify)
Check the official repository: https://github.com/timolins/react-hot-toast
Look for part 39 of this series for more advanced topics

Summary

You've successfully set up react-hot-toast in your React application and created a toast notification system with custom hooks, promise handling, and advanced features. react-hot-toast provides a lightweight, beautiful solution for displaying temporary messages with extensive customization options.

SEO Keywords

react-hot-toast
React toast notifications
react-hot-toast tutorial
React notification library
react-hot-toast installation
React toast messages
react-hot-toast example
React alert notifications
react-hot-toast setup
React toast hooks
react-hot-toast customization
React notification system
react-hot-toast promise
React toast library
react-hot-toast getting started

Getting Started with Simple React Notifications: Building Toast Notifications

James Parker — Mon, 19 Jan 2026 16:36:29 +0000

Simple React Notifications is a lightweight and easy-to-use library for displaying toast notifications in React applications. It provides a simple API for showing temporary messages with minimal configuration, making it perfect for beginners who want to add notifications to their apps quickly. This guide walks through setting up and creating toast notifications using Simple React Notifications with React, from installation to a working implementation. This is part 37 of a series on using Simple React Notifications with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState)
Familiarity with JavaScript/TypeScript

Installation

Install Simple React Notifications using your preferred package manager:

npm install simple-react-notifications

Or with yarn:

yarn add simple-react-notifications

Or with pnpm:

pnpm add simple-react-notifications

After installation, your package.json should include:

{
  "dependencies": {
    "simple-react-notifications": "^2.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Set up the notification provider in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { NotificationProvider } from 'simple-react-notifications';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <NotificationProvider>
      <App />
    </NotificationProvider>
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple notification component. Create a new file src/NotificationExample.jsx:

// src/NotificationExample.jsx
import React from 'react';
import { useNotifications } from 'simple-react-notifications';

function NotificationExample() {
  const { showSuccess, showError, showInfo, showWarning } = useNotifications();

  return (
    <div style={{ padding: '20px' }}>
      <h2>Notification Examples</h2>
      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
        <button onClick={() => showSuccess('Operation completed successfully!')}>
          Success
        </button>
        <button onClick={() => showError('Something went wrong!')}>
          Error
        </button>
        <button onClick={() => showInfo('Here is some information.')}>
          Info
        </button>
        <button onClick={() => showWarning('Please review your input.')}>
          Warning
        </button>
      </div>
    </div>
  );
}

export default NotificationExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import NotificationExample from './NotificationExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <NotificationExample />
    </div>
  );
}

export default App;

This creates basic toast notifications that appear when you click the buttons and automatically disappear after a few seconds.

Understanding the Basics

Simple React Notifications uses a hook-based API where:

useNotifications: Hook that provides notification functions
showSuccess: Show a success notification
showError: Show an error notification
showInfo: Show an info notification
showWarning: Show a warning notification
NotificationProvider: Provider component that manages notification state

Key concepts:

Provider Component: NotificationProvider must wrap your app
Hook Usage: Use useNotifications hook in components to access notification functions
Automatic Dismissal: Notifications automatically disappear after a set duration
Simple API: Minimal configuration required to get started
Customization: Basic customization options available

Here's an example with custom options:

// src/CustomNotificationExample.jsx
import React from 'react';
import { useNotifications } from 'simple-react-notifications';

function CustomNotificationExample() {
  const { showSuccess, showError } = useNotifications();

  const showCustomSuccess = () => {
    showSuccess('Custom success message', {
      duration: 5000,
      position: 'top-right'
    });
  };

  const showCustomError = () => {
    showError('Custom error message', {
      duration: 7000,
      position: 'bottom-left'
    });
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Custom Notification Examples</h2>
      <div style={{ display: 'flex', gap: '10px' }}>
        <button onClick={showCustomSuccess}>Custom Success</button>
        <button onClick={showCustomError}>Custom Error</button>
      </div>
    </div>
  );
}

export default CustomNotificationExample;

Practical Example / Building Something Real

Let's build a form component with notification feedback:

// src/FormWithNotifications.jsx
import React, { useState } from 'react';
import { useNotifications } from 'simple-react-notifications';

function FormWithNotifications() {
  const { showSuccess, showError, showInfo } = useNotifications();
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  const [errors, setErrors] = useState({});

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    if (errors[name]) {
      setErrors(prev => ({ ...prev, [name]: '' }));
    }
  };

  const validateForm = () => {
    const newErrors = {};
    if (!formData.name.trim()) {
      newErrors.name = 'Name is required';
    }
    if (!formData.email.trim()) {
      newErrors.email = 'Email is required';
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      newErrors.email = 'Invalid email format';
    }
    if (!formData.message.trim()) {
      newErrors.message = 'Message is required';
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!validateForm()) {
      showError('Please fill in all fields correctly.');
      return;
    }

    showInfo('Submitting form...', { duration: 2000 });

    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 2000));

      showSuccess('Form submitted successfully!', { duration: 3000 });

      // Reset form
      setFormData({ name: '', email: '', message: '' });
      setErrors({});
    } catch (error) {
      showError('Failed to submit form. Please try again.', { duration: 4000 });
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '500px', margin: '0 auto' }}>
      <h2>Contact Form with Notifications</h2>
      <form onSubmit={handleSubmit}>
        <div style={{ marginBottom: '16px' }}>
          <label
            htmlFor="name"
            style={{
              display: 'block',
              marginBottom: '4px',
              fontWeight: '500'
            }}
          >
            Name *
          </label>
          <input
            type="text"
            id="name"
            name="name"
            value={formData.name}
            onChange={handleInputChange}
            style={{
              width: '100%',
              padding: '8px',
              border: `1px solid ${errors.name ? '#dc3545' : '#ddd'}`,
              borderRadius: '4px',
              fontSize: '14px',
              boxSizing: 'border-box'
            }}
          />
          {errors.name && (
            <div
              style={{
                color: '#dc3545',
                fontSize: '12px',
                marginTop: '4px'
              }}
            >
              {errors.name}
            </div>
          )}
        </div>

        <div style={{ marginBottom: '16px' }}>
          <label
            htmlFor="email"
            style={{
              display: 'block',
              marginBottom: '4px',
              fontWeight: '500'
            }}
          >
            Email *
          </label>
          <input
            type="email"
            id="email"
            name="email"
            value={formData.email}
            onChange={handleInputChange}
            style={{
              width: '100%',
              padding: '8px',
              border: `1px solid ${errors.email ? '#dc3545' : '#ddd'}`,
              borderRadius: '4px',
              fontSize: '14px',
              boxSizing: 'border-box'
            }}
          />
          {errors.email && (
            <div
              style={{
                color: '#dc3545',
                fontSize: '12px',
                marginTop: '4px'
              }}
            >
              {errors.email}
            </div>
          )}
        </div>

        <div style={{ marginBottom: '16px' }}>
          <label
            htmlFor="message"
            style={{
              display: 'block',
              marginBottom: '4px',
              fontWeight: '500'
            }}
          >
            Message *
          </label>
          <textarea
            id="message"
            name="message"
            value={formData.message}
            onChange={handleInputChange}
            rows={4}
            style={{
              width: '100%',
              padding: '8px',
              border: `1px solid ${errors.message ? '#dc3545' : '#ddd'}`,
              borderRadius: '4px',
              fontSize: '14px',
              resize: 'vertical',
              fontFamily: 'inherit',
              boxSizing: 'border-box'
            }}
          />
          {errors.message && (
            <div
              style={{
                color: '#dc3545',
                fontSize: '12px',
                marginTop: '4px'
              }}
            >
              {errors.message}
            </div>
          )}
        </div>

        <button
          type="submit"
          style={{
            width: '100%',
            padding: '10px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '16px'
          }}
        >
          Submit
        </button>
      </form>
    </div>
  );
}

export default FormWithNotifications;

Now create a custom hook for reusable notifications:

// src/hooks/useNotificationHelpers.js
import { useCallback } from 'react';
import { useNotifications } from 'simple-react-notifications';

export const useNotificationHelpers = () => {
  const { showSuccess, showError, showInfo, showWarning } = useNotifications();

  const notifyFormSuccess = useCallback((message) => {
    showSuccess(message, {
      duration: 3000,
      position: 'top-right'
    });
  }, [showSuccess]);

  const notifyFormError = useCallback((message) => {
    showError(message, {
      duration: 5000,
      position: 'top-right'
    });
  }, [showError]);

  const notifyApiSuccess = useCallback((message) => {
    showSuccess(message, {
      duration: 4000,
      position: 'top-center'
    });
  }, [showSuccess]);

  const notifyApiError = useCallback((message) => {
    showError(message, {
      duration: 6000,
      position: 'top-center'
    });
  }, [showError]);

  return {
    notifyFormSuccess,
    notifyFormError,
    notifyApiSuccess,
    notifyApiError,
    showInfo,
    showWarning
  };
};

Update your App.jsx:

// src/App.jsx
import React from 'react';
import FormWithNotifications from './FormWithNotifications';
import './App.css';

function App() {
  return (
    <div className="App">
      <FormWithNotifications />
    </div>
  );
}

export default App;

This example demonstrates:

Form validation with notification feedback
Success and error notifications
Loading state notifications
Custom notification durations
Integration with form submission

Common Issues / Troubleshooting

Notifications not displaying: Ensure NotificationProvider wraps your app at the root level. The provider must be a parent of components using useNotifications.
Hook not working: Make sure you're calling useNotifications inside a component that's a child of NotificationProvider. The hook cannot be used outside the provider context.
Notifications appearing in wrong position: Use the position option when calling notification functions. Available positions may include 'top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center'.
Notifications not auto-dismissing: Check the duration option. Set a duration in milliseconds (e.g., 3000 for 3 seconds). If duration is not set, notifications may use a default duration.
Multiple notifications stacking: Simple React Notifications handles multiple notifications automatically. They will stack based on the position setting.
Styling issues: Simple React Notifications comes with default styles. You can customize the appearance by passing style options or using CSS to override default styles.

Next Steps

Now that you have a basic understanding of Simple React Notifications:

Learn about advanced customization options
Explore different notification positions and animations
Implement notification queues and limits
Add custom notification components
Integrate with React Context for global notification management
Learn about other notification libraries (react-toastify, notistack)
Check the official repository: https://github.com/alexpermyakov/simple-react-notifications
Look for part 38 of this series for more advanced topics

Summary

You've successfully set up Simple React Notifications in your React application and created toast notifications for user feedback. Simple React Notifications provides a simple, lightweight solution for displaying temporary messages with minimal configuration.

SEO Keywords

simple-react-notifications
React toast notifications
simple-react-notifications tutorial
React notification library
simple-react-notifications installation
React toast messages
simple-react-notifications example
React alert notifications
simple-react-notifications setup
React notification hooks
simple-react-notifications customization
React notification system
simple-react-notifications provider
React toast library
simple-react-notifications getting started

Advanced Notification System with Reapop and Redux in React

James Parker — Mon, 19 Jan 2026 16:35:29 +0000

Reapop is a powerful, Redux-based notification system for React applications. It provides a flexible and scalable approach to managing notifications using Redux for state management, making it ideal for complex applications that need centralized notification handling. This guide walks through advanced usage of Reapop with React and Redux, including custom configurations, middleware integration, and complex notification patterns. This is part 36 of a series on using Reapop with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Redux and React-Redux installed and configured
Basic knowledge of Redux (actions, reducers, store)
Understanding of React hooks (useSelector, useDispatch)
Familiarity with JavaScript/TypeScript

Installation

Install Reapop and Redux dependencies:

npm install reapop react-redux redux

Or with yarn:

yarn add reapop react-redux redux

Or with pnpm:

pnpm add reapop react-redux redux

After installation, your package.json should include:

{
  "dependencies": {
    "reapop": "^4.0.0",
    "react-redux": "^8.0.0",
    "redux": "^4.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Set up Redux store with Reapop reducer. First, create the Redux store:

// src/store/index.js
import { createStore, combineReducers } from 'redux';
import { reducer as notificationsReducer } from 'reapop';

const rootReducer = combineReducers({
  notifications: notificationsReducer
});

export const store = createStore(rootReducer);

Now set up the provider and notification system in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store';
import { NotificationsSystem } from 'reapop';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
      <NotificationsSystem />
    </Provider>
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple notification component. Create a new file src/NotificationExample.jsx:

// src/NotificationExample.jsx
import React from 'react';
import { useDispatch } from 'react-redux';
import { notify } from 'reapop';

function NotificationExample() {
  const dispatch = useDispatch();

  const showSuccess = () => {
    dispatch(notify({
      title: 'Success!',
      message: 'Operation completed successfully.',
      status: 'success',
      dismissible: true,
      dismissAfter: 3000
    }));
  };

  const showError = () => {
    dispatch(notify({
      title: 'Error!',
      message: 'Something went wrong.',
      status: 'error',
      dismissible: true,
      dismissAfter: 5000
    }));
  };

  const showWarning = () => {
    dispatch(notify({
      title: 'Warning!',
      message: 'Please review your input.',
      status: 'warning',
      dismissible: true,
      dismissAfter: 4000
    }));
  };

  const showInfo = () => {
    dispatch(notify({
      title: 'Info',
      message: 'Here is some information.',
      status: 'info',
      dismissible: true,
      dismissAfter: 3000
    }));
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Notification Examples</h2>
      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
        <button onClick={showSuccess}>Success</button>
        <button onClick={showError}>Error</button>
        <button onClick={showWarning}>Warning</button>
        <button onClick={showInfo}>Info</button>
      </div>
    </div>
  );
}

export default NotificationExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import NotificationExample from './NotificationExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <NotificationExample />
    </div>
  );
}

export default App;

Understanding the Basics

Reapop uses Redux for state management where:

notify action: Creates a new notification
dismissNotification action: Dismisses a specific notification
dismissNotifications action: Dismisses all notifications
NotificationsSystem: Component that renders all notifications
Redux Store: Centralized state management for all notifications

Key concepts for advanced usage:

Redux Integration: Notifications are managed through Redux store
Action Creators: Use notify action creator to create notifications
Middleware: Can integrate with Redux middleware for async operations
Custom Components: Customize notification appearance and behavior
Positioning: Configure notification positions and stacking

Here's an example with custom configuration:

// src/store/index.js
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { reducer as notificationsReducer, setUpNotifications } from 'reapop';
import thunk from 'redux-thunk';

// Configure notifications
setUpNotifications({
  defaultProps: {
    position: 'top-right',
    dismissible: true,
    dismissAfter: 5000
  }
});

const rootReducer = combineReducers({
  notifications: notificationsReducer
});

export const store = createStore(rootReducer, applyMiddleware(thunk));

Practical Example / Building Something Real

Let's build a comprehensive notification system with custom hooks, middleware integration, and advanced features:

// src/hooks/useNotifications.js
import { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { notify, dismissNotification } from 'reapop';

export const useNotifications = () => {
  const dispatch = useDispatch();

  const showSuccess = useCallback((title, message, options = {}) => {
    return dispatch(notify({
      title,
      message,
      status: 'success',
      dismissible: true,
      dismissAfter: 3000,
      ...options
    }));
  }, [dispatch]);

  const showError = useCallback((title, message, options = {}) => {
    return dispatch(notify({
      title,
      message,
      status: 'error',
      dismissible: true,
      dismissAfter: 5000,
      ...options
    }));
  }, [dispatch]);

  const showWarning = useCallback((title, message, options = {}) => {
    return dispatch(notify({
      title,
      message,
      status: 'warning',
      dismissible: true,
      dismissAfter: 4000,
      ...options
    }));
  }, [dispatch]);

  const showInfo = useCallback((title, message, options = {}) => {
    return dispatch(notify({
      title,
      message,
      status: 'info',
      dismissible: true,
      dismissAfter: 3000,
      ...options
    }));
  }, [dispatch]);

  const showLoading = useCallback((title, message) => {
    return dispatch(notify({
      title,
      message,
      status: 'loading',
      dismissible: false,
      dismissAfter: 0
    }));
  }, [dispatch]);

  const dismiss = useCallback((notificationId) => {
    dispatch(dismissNotification(notificationId));
  }, [dispatch]);

  return {
    showSuccess,
    showError,
    showWarning,
    showInfo,
    showLoading,
    dismiss
  };
};

Now create an advanced notification system component:

// src/AdvancedNotificationSystem.jsx
import React, { useState } from 'react';
import { useNotifications } from './hooks/useNotifications';
import { useDispatch } from 'react-redux';
import { dismissNotifications } from 'reapop';

function AdvancedNotificationSystem() {
  const { showSuccess, showError, showWarning, showInfo, showLoading, dismiss } = useNotifications();
  const dispatch = useDispatch();
  const [formData, setFormData] = useState({
    title: '',
    message: '',
    status: 'success'
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!formData.title || !formData.message) {
      showError('Validation Error', 'Please fill in all fields.');
      return;
    }

    const options = {
      position: 'top-right',
      dismissible: true
    };

    switch (formData.status) {
      case 'success':
        showSuccess(formData.title, formData.message, options);
        break;
      case 'error':
        showError(formData.title, formData.message, options);
        break;
      case 'warning':
        showWarning(formData.title, formData.message, options);
        break;
      case 'info':
        showInfo(formData.title, formData.message, options);
        break;
      default:
        showInfo(formData.title, formData.message, options);
    }

    setFormData({ title: '', message: '', status: 'success' });
  };

  const simulateApiCall = async () => {
    const loadingId = showLoading('Processing', 'Processing your request...');

    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 2000));

      dismiss(loadingId);
      showSuccess('Success', 'Operation completed successfully!');
    } catch (error) {
      dismiss(loadingId);
      showError('Error', 'Failed to complete operation. Please try again.');
    }
  };

  const showActionNotification = () => {
    const notificationId = showWarning('Action Required', 'Do you want to proceed?', {
      dismissAfter: 0,
      buttons: [
        {
          name: 'Yes',
          primary: true,
          onClick: () => {
            dismiss(notificationId);
            showSuccess('Confirmed', 'Action confirmed.');
          }
        },
        {
          name: 'No',
          onClick: () => {
            dismiss(notificationId);
            showInfo('Cancelled', 'Action cancelled.');
          }
        }
      ]
    });
  };

  const clearAllNotifications = () => {
    dispatch(dismissNotifications());
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h1>Advanced Notification System</h1>

      <form onSubmit={handleSubmit} style={{ marginBottom: '20px', padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
        <div style={{ marginBottom: '16px' }}>
          <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
            Title *
          </label>
          <input
            type="text"
            name="title"
            value={formData.title}
            onChange={handleInputChange}
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              boxSizing: 'border-box'
            }}
            required
          />
        </div>

        <div style={{ marginBottom: '16px' }}>
          <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
            Message *
          </label>
          <textarea
            name="message"
            value={formData.message}
            onChange={handleInputChange}
            rows={3}
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              boxSizing: 'border-box',
              resize: 'vertical'
            }}
            required
          />
        </div>

        <div style={{ marginBottom: '16px' }}>
          <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
            Status
          </label>
          <select
            name="status"
            value={formData.status}
            onChange={handleInputChange}
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              boxSizing: 'border-box'
            }}
          >
            <option value="success">Success</option>
            <option value="error">Error</option>
            <option value="warning">Warning</option>
            <option value="info">Info</option>
          </select>
        </div>

        <button
          type="submit"
          style={{
            width: '100%',
            padding: '10px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '16px'
          }}
        >
          Show Notification
        </button>
      </form>

      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        <button
          onClick={simulateApiCall}
          style={{
            padding: '10px',
            backgroundColor: '#28a745',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Simulate API Call
        </button>
        <button
          onClick={showActionNotification}
          style={{
            padding: '10px',
            backgroundColor: '#ffc107',
            color: 'black',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Show Action Notification
        </button>
        <button
          onClick={clearAllNotifications}
          style={{
            padding: '10px',
            backgroundColor: '#dc3545',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Clear All Notifications
        </button>
      </div>
    </div>
  );
}

export default AdvancedNotificationSystem;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import AdvancedNotificationSystem from './AdvancedNotificationSystem';
import './App.css';

function App() {
  return (
    <div className="App">
      <AdvancedNotificationSystem />
    </div>
  );
}

export default App;

Update your store configuration for better setup:

// src/store/index.js
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { reducer as notificationsReducer, setUpNotifications } from 'reapop';
import thunk from 'redux-thunk';

// Configure notifications
setUpNotifications({
  defaultProps: {
    position: 'top-right',
    dismissible: true,
    dismissAfter: 5000,
    allowHTML: false
  }
});

const rootReducer = combineReducers({
  notifications: notificationsReducer
});

export const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

Common Issues / Troubleshooting

Notifications not displaying: Ensure NotificationsSystem is rendered in your app and Provider wraps your application with the Redux store.
Redux store not configured: Make sure you've added the notifications reducer to your Redux store using combineReducers.
Actions not working: Ensure you're using useDispatch from react-redux to dispatch notification actions. The notify action creator must be imported from reapop.
Notifications not dismissing: Check the dismissAfter property. Set it to a number (milliseconds) for auto-dismissal, or 0 for persistent notifications. Use dismissible: true to allow manual dismissal.
Custom styling not working: Reapop allows custom notification components. You can override the default notification component by configuring it in setUpNotifications.
Multiple notifications stacking: Reapop handles multiple notifications automatically. They will stack based on the position setting. Use dismissNotifications() to clear all notifications at once.

Next Steps

Now that you have an advanced understanding of Reapop:

Explore Redux middleware integration for async notifications
Learn about custom notification components
Implement notification persistence and storage
Add notification queues and limits
Integrate with Redux DevTools for debugging
Learn about other notification libraries (notistack, react-toastify)
Check the official repository: https://github.com/LouisBarranqueiro/reapop
Look for part 37 of this series for more advanced topics

Summary

You've successfully integrated Reapop into your React application with Redux for advanced notification management. Reapop provides a scalable, Redux-based solution for displaying notifications with centralized state management and extensive customization options.

SEO Keywords

reapop
React Redux notifications
reapop tutorial
React notification system
reapop installation
React Redux toast
reapop example
React notification library
reapop setup
React Redux alerts
reapop customization
React notification hooks
reapop middleware
React notification state
reapop getting started

Building Toast Notification Systems with react-toast in React

James Parker — Mon, 19 Jan 2026 16:32:01 +0000

react-toast is a flexible and customizable library for displaying toast notifications in React applications. It provides a simple API for showing temporary messages with various types, positions, and customization options. This guide walks through setting up and creating toast notification systems using react-toast with React, from installation to a working implementation. This is part 35 of a series on using react-toast with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect, useCallback)
Familiarity with JavaScript/TypeScript
Understanding of CSS for styling

Installation

Install react-toast using your preferred package manager:

npm install react-toast

Or with yarn:

yarn add react-toast

Or with pnpm:

pnpm add react-toast

After installation, your package.json should include:

{
  "dependencies": {
    "react-toast": "^1.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Set up the toast container in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ToastContainer } from 'react-toast';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
    <ToastContainer />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple toast notification component. Create a new file src/ToastExample.jsx:

// src/ToastExample.jsx
import React from 'react';
import { toast } from 'react-toast';

function ToastExample() {
  const showSuccessToast = () => {
    toast.success('Operation completed successfully!');
  };

  const showErrorToast = () => {
    toast.error('Something went wrong!');
  };

  const showInfoToast = () => {
    toast.info('Here is some information.');
  };

  const showWarningToast = () => {
    toast.warning('Please review your input.');
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Toast Notification Examples</h2>
      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
        <button onClick={showSuccessToast}>Success Toast</button>
        <button onClick={showErrorToast}>Error Toast</button>
        <button onClick={showInfoToast}>Info Toast</button>
        <button onClick={showWarningToast}>Warning Toast</button>
      </div>
    </div>
  );
}

export default ToastExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ToastExample from './ToastExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <ToastExample />
    </div>
  );
}

export default App;

This creates basic toast notifications that appear when you click the buttons and automatically disappear after a few seconds.

Understanding the Basics

react-toast provides several key features:

toast.success: Show a success toast
toast.error: Show an error toast
toast.info: Show an info toast
toast.warning: Show a warning toast
toast.show: Show a custom toast with options
ToastContainer: Component that renders all toasts
Positioning: Customizable toast positions
Customization: Extensive styling and behavior options

Key concepts:

Toast Container: ToastContainer must be rendered in your app to display toasts
Toast API: Use the toast object to show different types of toasts
Automatic Dismissal: Toasts automatically disappear after a set duration
Positioning: Toasts can be positioned in different corners
Customization: Toast appearance and behavior can be customized with options

Here's an example with custom options:

// src/CustomToastExample.jsx
import React from 'react';
import { toast } from 'react-toast';

function CustomToastExample() {
  const showCustomToast = () => {
    toast.show('Custom toast message', {
      type: 'success',
      duration: 5000,
      position: 'top-right'
    });
  };

  const showLongToast = () => {
    toast.success('This is a longer toast message that will stay visible for 10 seconds', {
      duration: 10000
    });
  };

  const showBottomToast = () => {
    toast.info('This toast appears at the bottom', {
      position: 'bottom-center'
    });
  };

  const showPersistentToast = () => {
    toast.warning('This toast will not auto-dismiss', {
      duration: 0
    });
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Custom Toast Examples</h2>
      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
        <button onClick={showCustomToast}>Custom Toast</button>
        <button onClick={showLongToast}>Long Duration Toast</button>
        <button onClick={showBottomToast}>Bottom Position Toast</button>
        <button onClick={showPersistentToast}>Persistent Toast</button>
      </div>
    </div>
  );
}

export default CustomToastExample;

Practical Example / Building Something Real

Let's build a comprehensive notification system with a custom hook and different notification patterns:

// src/hooks/useToastNotifications.js
import { useCallback } from 'react';
import { toast } from 'react-toast';

export const useToastNotifications = () => {
  const showSuccess = useCallback((message, options = {}) => {
    toast.success(message, {
      duration: 3000,
      position: 'top-right',
      ...options
    });
  }, []);

  const showError = useCallback((message, options = {}) => {
    toast.error(message, {
      duration: 5000,
      position: 'top-right',
      ...options
    });
  }, []);

  const showWarning = useCallback((message, options = {}) => {
    toast.warning(message, {
      duration: 4000,
      position: 'top-right',
      ...options
    });
  }, []);

  const showInfo = useCallback((message, options = {}) => {
    toast.info(message, {
      duration: 3000,
      position: 'top-right',
      ...options
    });
  }, []);

  const showLoading = useCallback((message) => {
    return toast.show(message, {
      type: 'info',
      duration: 0,
      position: 'top-right'
    });
  }, []);

  return {
    showSuccess,
    showError,
    showWarning,
    showInfo,
    showLoading
  };
};

Now create an advanced notification system component:

// src/AdvancedToastSystem.jsx
import React, { useState } from 'react';
import { useToastNotifications } from './hooks/useToastNotifications';
import { toast } from 'react-toast';

function AdvancedToastSystem() {
  const { showSuccess, showError, showWarning, showInfo, showLoading } = useToastNotifications();
  const [formData, setFormData] = useState({
    message: '',
    type: 'success',
    duration: 3000
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: name === 'duration' ? parseInt(value) || 0 : value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!formData.message) {
      showError('Please enter a message.');
      return;
    }

    const options = {
      duration: formData.duration || undefined,
      position: 'top-right'
    };

    switch (formData.type) {
      case 'success':
        showSuccess(formData.message, options);
        break;
      case 'error':
        showError(formData.message, options);
        break;
      case 'warning':
        showWarning(formData.message, options);
        break;
      case 'info':
        showInfo(formData.message, options);
        break;
      default:
        showInfo(formData.message, options);
    }

    setFormData({ message: '', type: 'success', duration: 3000 });
  };

  const simulateApiCall = async () => {
    const loadingId = showLoading('Processing your request...');

    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 2000));

      // Dismiss loading and show success
      toast.dismiss(loadingId);
      showSuccess('Operation completed successfully!');
    } catch (error) {
      toast.dismiss(loadingId);
      showError('Failed to complete operation. Please try again.');
    }
  };

  const showCustomStyledToast = () => {
    toast.show('Custom styled toast notification', {
      type: 'success',
      duration: 3000,
      position: 'top-center',
      style: {
        backgroundColor: '#4caf50',
        color: 'white',
        borderRadius: '8px',
        padding: '16px',
        fontSize: '16px'
      }
    });
  };

  const showActionToast = () => {
    toast.show('Item will be deleted', {
      type: 'warning',
      duration: 0,
      position: 'bottom-left',
      action: {
        label: 'Undo',
        onClick: () => {
          showSuccess('Action cancelled');
        }
      }
    });
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h1>Advanced Toast System</h1>

      <form onSubmit={handleSubmit} style={{ marginBottom: '20px', padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
        <div style={{ marginBottom: '16px' }}>
          <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
            Message *
          </label>
          <input
            type="text"
            name="message"
            value={formData.message}
            onChange={handleInputChange}
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              boxSizing: 'border-box'
            }}
            required
          />
        </div>

        <div style={{ marginBottom: '16px' }}>
          <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
            Type
          </label>
          <select
            name="type"
            value={formData.type}
            onChange={handleInputChange}
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              boxSizing: 'border-box'
            }}
          >
            <option value="success">Success</option>
            <option value="error">Error</option>
            <option value="warning">Warning</option>
            <option value="info">Info</option>
          </select>
        </div>

        <div style={{ marginBottom: '16px' }}>
          <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
            Duration (ms)
          </label>
          <input
            type="number"
            name="duration"
            value={formData.duration}
            onChange={handleInputChange}
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              boxSizing: 'border-box'
            }}
          />
          <small style={{ color: '#666' }}>0 for persistent notification</small>
        </div>

        <button
          type="submit"
          style={{
            width: '100%',
            padding: '10px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '16px'
          }}
        >
          Show Toast
        </button>
      </form>

      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        <button
          onClick={simulateApiCall}
          style={{
            padding: '10px',
            backgroundColor: '#28a745',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Simulate API Call
        </button>
        <button
          onClick={showCustomStyledToast}
          style={{
            padding: '10px',
            backgroundColor: '#ffc107',
            color: 'black',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Show Custom Styled Toast
        </button>
        <button
          onClick={showActionToast}
          style={{
            padding: '10px',
            backgroundColor: '#dc3545',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Show Action Toast
        </button>
      </div>
    </div>
  );
}

export default AdvancedToastSystem;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import { ToastContainer } from 'react-toast';
import AdvancedToastSystem from './AdvancedToastSystem';
import './App.css';

function App() {
  return (
    <div className="App">
      <AdvancedToastSystem />
      <ToastContainer position="top-right" />
    </div>
  );
}

export default App;

Common Issues / Troubleshooting

Toasts not displaying: Ensure ToastContainer is rendered in your app. It should be placed at the root level, typically in your main App component.
Toasts appearing in wrong position: Use the position option when calling toast functions or set it on the ToastContainer component. Available positions include 'top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center'.
Toasts not auto-dismissing: Check the duration option. Set a duration in milliseconds (e.g., 3000 for 3 seconds). If duration is 0, toasts will not auto-dismiss.
Multiple toast containers: You can have multiple ToastContainer components with different positions to show toasts in different locations simultaneously.
Custom styling not working: Use the style option when calling toast functions to apply custom styles. Make sure styles are valid CSS properties.
Action buttons not working: When using the action option, ensure the onClick handler is properly defined. Action toasts typically have duration: 0 to prevent auto-dismissal.

Next Steps

Now that you have an understanding of react-toast:

Explore advanced customization options
Learn about different toast positions and animations
Implement toast queues and limits
Add custom toast components
Integrate with React Context for global toast management
Learn about other toast libraries (react-toastify, notistack)
Check the official repository: https://github.com/moharnadreza/react-toast
Look for part 36 of this series for more advanced topics

Summary

You've successfully set up react-toast in your React application and created a toast notification system with custom hooks and different notification patterns. react-toast provides a flexible API for displaying temporary messages with extensive customization options.

SEO Keywords

react-toast
React toast notifications
react-toast tutorial
React notification library
react-toast installation
React toast messages
react-toast example
React alert notifications
react-toast setup
React toast hooks
react-toast customization
React notification system
react-toast container
React toast library
react-toast getting started

Getting Started with React Local Toast: Building Toast Notifications

James Parker — Mon, 19 Jan 2026 16:30:34 +0000

React Local Toast is a lightweight, flexible library for displaying toast notifications in React applications. It provides a simple API for showing temporary messages that appear and disappear automatically, perfect for user feedback, success messages, and error alerts. This guide walks through setting up and creating toast notifications using React Local Toast with React, from installation to a working implementation. This is part 34 of a series on using React Local Toast with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState)
Familiarity with JavaScript/TypeScript

Installation

Install React Local Toast using your preferred package manager:

npm install react-local-toast

Or with yarn:

yarn add react-local-toast

Or with pnpm:

pnpm add react-local-toast

After installation, your package.json should include:

{
  "dependencies": {
    "react-local-toast": "^4.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Set up the toast provider in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { LocalToastProvider } from 'react-local-toast';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <LocalToastProvider>
      <App />
    </LocalToastProvider>
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple toast notification component. Create a new file src/ToastExample.jsx:

// src/ToastExample.jsx
import React from 'react';
import { useLocalToast } from 'react-local-toast';

function ToastExample() {
  const toast = useLocalToast();

  const showSuccessToast = () => {
    toast.success('Operation completed successfully!');
  };

  const showErrorToast = () => {
    toast.error('Something went wrong!');
  };

  const showInfoToast = () => {
    toast.info('Here is some information.');
  };

  const showWarningToast = () => {
    toast.warning('Please review your input.');
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Toast Notification Examples</h2>
      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
        <button onClick={showSuccessToast}>Success Toast</button>
        <button onClick={showErrorToast}>Error Toast</button>
        <button onClick={showInfoToast}>Info Toast</button>
        <button onClick={showWarningToast}>Warning Toast</button>
      </div>
    </div>
  );
}

export default ToastExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ToastExample from './ToastExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <ToastExample />
    </div>
  );
}

export default App;

This creates basic toast notifications that appear when you click the buttons and automatically disappear after a few seconds.

Understanding the Basics

React Local Toast uses a hook-based API where:

useLocalToast: Hook that provides toast functions
toast.success: Show a success toast
toast.error: Show an error toast
toast.info: Show an info toast
toast.warning: Show a warning toast
toast.show: Show a custom toast with options

Key concepts:

Provider Component: LocalToastProvider must wrap your app
Hook Usage: Use useLocalToast hook in components to access toast functions
Automatic Dismissal: Toasts automatically disappear after a set duration
Positioning: Toasts can be positioned in different corners
Customization: Toast appearance and behavior can be customized

Here's an example with custom options:

// src/CustomToastExample.jsx
import React from 'react';
import { useLocalToast } from 'react-local-toast';

function CustomToastExample() {
  const toast = useLocalToast();

  const showCustomToast = () => {
    toast.show('Custom toast message', {
      type: 'success',
      duration: 5000,
      position: 'top-right'
    });
  };

  const showLongToast = () => {
    toast.success('This is a longer toast message that will stay visible for 10 seconds', {
      duration: 10000
    });
  };

  const showBottomToast = () => {
    toast.info('This toast appears at the bottom', {
      position: 'bottom-center'
    });
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Custom Toast Examples</h2>
      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
        <button onClick={showCustomToast}>Custom Toast</button>
        <button onClick={showLongToast}>Long Duration Toast</button>
        <button onClick={showBottomToast}>Bottom Position Toast</button>
      </div>
    </div>
  );
}

export default CustomToastExample;

Practical Example / Building Something Real

Let's build a form component with toast notifications for user feedback:

// src/FormWithToast.jsx
import React, { useState } from 'react';
import { useLocalToast } from 'react-local-toast';

function FormWithToast() {
  const toast = useLocalToast();
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  const [errors, setErrors] = useState({});

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    if (errors[name]) {
      setErrors(prev => ({ ...prev, [name]: '' }));
    }
  };

  const validateForm = () => {
    const newErrors = {};
    if (!formData.name.trim()) {
      newErrors.name = 'Name is required';
    }
    if (!formData.email.trim()) {
      newErrors.email = 'Email is required';
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      newErrors.email = 'Invalid email format';
    }
    if (!formData.message.trim()) {
      newErrors.message = 'Message is required';
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!validateForm()) {
      toast.error('Please fill in all fields correctly.');
      return;
    }

    // Show loading toast
    toast.info('Submitting form...', { duration: 2000 });

    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 2000));

      toast.success('Form submitted successfully!', {
        duration: 3000
      });

      // Reset form
      setFormData({ name: '', email: '', message: '' });
      setErrors({});
    } catch (error) {
      toast.error('Failed to submit form. Please try again.', {
        duration: 4000
      });
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '500px', margin: '0 auto' }}>
      <h2>Contact Form with Toast Notifications</h2>
      <form onSubmit={handleSubmit}>
        <div style={{ marginBottom: '16px' }}>
          <label
            htmlFor="name"
            style={{
              display: 'block',
              marginBottom: '4px',
              fontWeight: '500'
            }}
          >
            Name *
          </label>
          <input
            type="text"
            id="name"
            name="name"
            value={formData.name}
            onChange={handleInputChange}
            style={{
              width: '100%',
              padding: '8px',
              border: `1px solid ${errors.name ? '#dc3545' : '#ddd'}`,
              borderRadius: '4px',
              fontSize: '14px',
              boxSizing: 'border-box'
            }}
          />
          {errors.name && (
            <div
              style={{
                color: '#dc3545',
                fontSize: '12px',
                marginTop: '4px'
              }}
            >
              {errors.name}
            </div>
          )}
        </div>

        <div style={{ marginBottom: '16px' }}>
          <label
            htmlFor="email"
            style={{
              display: 'block',
              marginBottom: '4px',
              fontWeight: '500'
            }}
          >
            Email *
          </label>
          <input
            type="email"
            id="email"
            name="email"
            value={formData.email}
            onChange={handleInputChange}
            style={{
              width: '100%',
              padding: '8px',
              border: `1px solid ${errors.email ? '#dc3545' : '#ddd'}`,
              borderRadius: '4px',
              fontSize: '14px',
              boxSizing: 'border-box'
            }}
          />
          {errors.email && (
            <div
              style={{
                color: '#dc3545',
                fontSize: '12px',
                marginTop: '4px'
              }}
            >
              {errors.email}
            </div>
          )}
        </div>

        <div style={{ marginBottom: '16px' }}>
          <label
            htmlFor="message"
            style={{
              display: 'block',
              marginBottom: '4px',
              fontWeight: '500'
            }}
          >
            Message *
          </label>
          <textarea
            id="message"
            name="message"
            value={formData.message}
            onChange={handleInputChange}
            rows={4}
            style={{
              width: '100%',
              padding: '8px',
              border: `1px solid ${errors.message ? '#dc3545' : '#ddd'}`,
              borderRadius: '4px',
              fontSize: '14px',
              resize: 'vertical',
              fontFamily: 'inherit',
              boxSizing: 'border-box'
            }}
          />
          {errors.message && (
            <div
              style={{
                color: '#dc3545',
                fontSize: '12px',
                marginTop: '4px'
              }}
            >
              {errors.message}
            </div>
          )}
        </div>

        <button
          type="submit"
          style={{
            width: '100%',
            padding: '10px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '16px'
          }}
        >
          Submit
        </button>
      </form>
    </div>
  );
}

export default FormWithToast;

Now create a custom hook for reusable toast notifications:

// src/hooks/useToastNotifications.js
import { useCallback } from 'react';
import { useLocalToast } from 'react-local-toast';

export const useToastNotifications = () => {
  const toast = useLocalToast();

  const showSuccess = useCallback((message, options = {}) => {
    toast.success(message, {
      duration: 3000,
      ...options
    });
  }, [toast]);

  const showError = useCallback((message, options = {}) => {
    toast.error(message, {
      duration: 5000,
      ...options
    });
  }, [toast]);

  const showInfo = useCallback((message, options = {}) => {
    toast.info(message, {
      duration: 3000,
      ...options
    });
  }, [toast]);

  const showWarning = useCallback((message, options = {}) => {
    toast.warning(message, {
      duration: 4000,
      ...options
    });
  }, [toast]);

  return {
    showSuccess,
    showError,
    showInfo,
    showWarning
  };
};

Update your App.jsx:

// src/App.jsx
import React from 'react';
import FormWithToast from './FormWithToast';
import './App.css';

function App() {
  return (
    <div className="App">
      <FormWithToast />
    </div>
  );
}

export default App;

This example demonstrates:

Form validation with toast feedback
Success and error notifications
Loading state notifications
Custom toast durations
Integration with form submission

Common Issues / Troubleshooting

Toasts not displaying: Ensure LocalToastProvider wraps your app at the root level. The provider must be a parent of components using useLocalToast.
Hook not working: Make sure you're calling useLocalToast inside a component that's a child of LocalToastProvider. The hook cannot be used outside the provider context.
Toasts appearing in wrong position: Use the position option when calling toast functions. Available positions include 'top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center'.
Toasts not auto-dismissing: Check the duration option. Set a duration in milliseconds (e.g., 3000 for 3 seconds). If duration is 0 or not set, toasts may not auto-dismiss.
Multiple toasts stacking: React Local Toast handles multiple toasts automatically. They will stack based on the position setting.
Styling issues: React Local Toast comes with default styles. You can customize the appearance by passing style options or using CSS to override default styles.

Next Steps

Now that you have a basic understanding of React Local Toast:

Learn about advanced customization options
Explore different toast positions and animations
Implement toast queues and limits
Add custom toast components
Integrate with React Context for global toast management
Learn about other toast libraries (react-toastify, notistack)
Check the official repository: https://github.com/OlegWock/react-local-toast
Look for part 35 of this series for more advanced topics

Summary

You've successfully set up React Local Toast in your React application and created toast notifications for user feedback. React Local Toast provides a simple, lightweight solution for displaying temporary messages with minimal configuration.

SEO Keywords

react-local-toast
React toast notifications
react-local-toast tutorial
React notification library
react-local-toast installation
React toast messages
react-local-toast example
React alert notifications
react-local-toast setup
React toast hooks
react-local-toast customization
React notification system
react-local-toast provider
React toast library
react-local-toast getting started

Advanced Toast Notifications with Notistack in React

James Parker — Mon, 19 Jan 2026 16:29:34 +0000

Notistack is a powerful, Material-UI-based notification library for React that provides a simple API for displaying snackbar notifications. It offers extensive customization options, queue management, and seamless integration with Material-UI themes. This guide walks through advanced usage of Notistack with React, including custom configurations, action buttons, and complex notification patterns. This is part 33 of a series on using Notistack with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Material-UI (MUI) installed in your project
Basic knowledge of React hooks (useState, useEffect, useCallback)
Familiarity with Material-UI components
Understanding of async/await and Promises

Installation

Install Notistack and Material-UI dependencies:

npm install notistack @mui/material @emotion/react @emotion/styled

Or with yarn:

yarn add notistack @mui/material @emotion/react @emotion/styled

Or with pnpm:

pnpm add notistack @mui/material @emotion/react @emotion/styled

After installation, your package.json should include:

{
  "dependencies": {
    "notistack": "^3.0.0",
    "@mui/material": "^5.0.0",
    "@emotion/react": "^11.0.0",
    "@emotion/styled": "^11.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Set up the SnackbarProvider in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { SnackbarProvider } from 'notistack';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <SnackbarProvider maxSnack={3}>
      <App />
    </SnackbarProvider>
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple notification component. Create a new file src/NotificationExample.jsx:

// src/NotificationExample.jsx
import React from 'react';
import { useSnackbar } from 'notistack';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';

function NotificationExample() {
  const { enqueueSnackbar } = useSnackbar();

  const showSuccess = () => {
    enqueueSnackbar('Operation completed successfully!', {
      variant: 'success',
      anchorOrigin: {
        vertical: 'top',
        horizontal: 'right'
      }
    });
  };

  const showError = () => {
    enqueueSnackbar('Something went wrong!', {
      variant: 'error',
      anchorOrigin: {
        vertical: 'top',
        horizontal: 'right'
      }
    });
  };

  const showWarning = () => {
    enqueueSnackbar('Please review your input.', {
      variant: 'warning',
      anchorOrigin: {
        vertical: 'top',
        horizontal: 'right'
      }
    });
  };

  const showInfo = () => {
    enqueueSnackbar('Here is some information.', {
      variant: 'info',
      anchorOrigin: {
        vertical: 'top',
        horizontal: 'right'
      }
    });
  };

  return (
    <Stack spacing={2} direction="row" sx={{ padding: 2 }}>
      <Button variant="contained" color="success" onClick={showSuccess}>
        Success
      </Button>
      <Button variant="contained" color="error" onClick={showError}>
        Error
      </Button>
      <Button variant="contained" color="warning" onClick={showWarning}>
        Warning
      </Button>
      <Button variant="contained" color="info" onClick={showInfo}>
        Info
      </Button>
    </Stack>
  );
}

export default NotificationExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import NotificationExample from './NotificationExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <NotificationExample />
    </div>
  );
}

export default App;

Understanding the Basics

Notistack provides several key features:

useSnackbar Hook: React hook for accessing notification functions
enqueueSnackbar: Function to add notifications to the queue
Variants: success, error, warning, info, default
Positioning: Customizable anchor positions (top/bottom, left/right/center)
Actions: Add action buttons to notifications
Queue Management: Automatic queue handling with maxSnack limit
Material-UI Integration: Seamless integration with MUI themes

Key concepts for advanced usage:

Custom Content: Use the content option to render custom React components
Action Buttons: Add action buttons with callbacks
Persistent Notifications: Notifications that don't auto-dismiss
Queue Management: Control how many notifications show at once
Custom Styling: Override default styles with Material-UI's sx prop

Here's an example with action buttons:

// src/ActionNotificationExample.jsx
import React from 'react';
import { useSnackbar } from 'notistack';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';

function ActionNotificationExample() {
  const { enqueueSnackbar, closeSnackbar } = useSnackbar();

  const showActionNotification = () => {
    const action = (snackbarId) => (
      <>
        <Button
          size="small"
          onClick={() => {
            alert('Action clicked!');
            closeSnackbar(snackbarId);
          }}
        >
          Undo
        </Button>
        <IconButton
          size="small"
          aria-label="close"
          color="inherit"
          onClick={() => closeSnackbar(snackbarId)}
        >
          <CloseIcon fontSize="small" />
        </IconButton>
      </>
    );

    enqueueSnackbar('Item deleted successfully', {
      variant: 'success',
      action,
      anchorOrigin: {
        vertical: 'bottom',
        horizontal: 'left'
      }
    });
  };

  const showPersistentNotification = () => {
    enqueueSnackbar('This notification will not auto-dismiss', {
      variant: 'info',
      persist: true,
      action: (snackbarId) => (
        <IconButton
          size="small"
          aria-label="close"
          color="inherit"
          onClick={() => closeSnackbar(snackbarId)}
        >
          <CloseIcon fontSize="small" />
        </IconButton>
      )
    });
  };

  return (
    <div style={{ padding: '20px' }}>
      <Button variant="contained" onClick={showActionNotification}>
        Show Action Notification
      </Button>
      <Button
        variant="contained"
        color="secondary"
        onClick={showPersistentNotification}
        sx={{ ml: 2 }}
      >
        Show Persistent Notification
      </Button>
    </div>
  );
}

export default ActionNotificationExample;

Practical Example / Building Something Real

Let's build a comprehensive notification system with custom hooks, error handling, and advanced features:

// src/hooks/useNotification.js
import { useCallback } from 'react';
import { useSnackbar } from 'notistack';

export const useNotification = () => {
  const { enqueueSnackbar, closeSnackbar } = useSnackbar();

  const showSuccess = useCallback((message, options = {}) => {
    enqueueSnackbar(message, {
      variant: 'success',
      anchorOrigin: {
        vertical: 'top',
        horizontal: 'right'
      },
      autoHideDuration: 3000,
      ...options
    });
  }, [enqueueSnackbar]);

  const showError = useCallback((message, options = {}) => {
    enqueueSnackbar(message, {
      variant: 'error',
      anchorOrigin: {
        vertical: 'top',
        horizontal: 'right'
      },
      autoHideDuration: 5000,
      ...options
    });
  }, [enqueueSnackbar]);

  const showWarning = useCallback((message, options = {}) => {
    enqueueSnackbar(message, {
      variant: 'warning',
      anchorOrigin: {
        vertical: 'top',
        horizontal: 'right'
      },
      autoHideDuration: 4000,
      ...options
    });
  }, [enqueueSnackbar]);

  const showInfo = useCallback((message, options = {}) => {
    enqueueSnackbar(message, {
      variant: 'info',
      anchorOrigin: {
        vertical: 'top',
        horizontal: 'right'
      },
      autoHideDuration: 3000,
      ...options
    });
  }, [enqueueSnackbar]);

  const showLoading = useCallback((message) => {
    return enqueueSnackbar(message, {
      variant: 'info',
      persist: true,
      anchorOrigin: {
        vertical: 'top',
        horizontal: 'right'
      }
    });
  }, [enqueueSnackbar]);

  return {
    showSuccess,
    showError,
    showWarning,
    showInfo,
    showLoading,
    closeSnackbar
  };
};

Now create an advanced notification system component:

// src/AdvancedNotificationSystem.jsx
import React, { useState } from 'react';
import { useNotification } from './hooks/useNotification';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
import { useSnackbar } from 'notistack';

function AdvancedNotificationSystem() {
  const { showSuccess, showError, showWarning, showInfo, showLoading, closeSnackbar } = useNotification();
  const { enqueueSnackbar } = useSnackbar();
  const [formData, setFormData] = useState({
    message: '',
    variant: 'success',
    duration: 3000
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: name === 'duration' ? parseInt(value) || 0 : value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!formData.message) {
      showError('Please enter a message.');
      return;
    }

    const options = {
      autoHideDuration: formData.duration || undefined,
      anchorOrigin: {
        vertical: 'top',
        horizontal: 'right'
      }
    };

    switch (formData.variant) {
      case 'success':
        showSuccess(formData.message, options);
        break;
      case 'error':
        showError(formData.message, options);
        break;
      case 'warning':
        showWarning(formData.message, options);
        break;
      case 'info':
        showInfo(formData.message, options);
        break;
      default:
        showInfo(formData.message, options);
    }

    setFormData({ message: '', variant: 'success', duration: 3000 });
  };

  const simulateApiCall = async () => {
    const loadingId = showLoading('Processing your request...');

    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 2000));

      closeSnackbar(loadingId);
      showSuccess('Operation completed successfully!');
    } catch (error) {
      closeSnackbar(loadingId);
      showError('Failed to complete operation. Please try again.');
    }
  };

  const showCustomContent = () => {
    enqueueSnackbar('Custom notification with React component', {
      variant: 'info',
      content: (key, message) => (
        <Paper
          key={key}
          elevation={3}
          sx={{
            p: 2,
            backgroundColor: '#1976d2',
            color: 'white',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            minWidth: 300
          }}
        >
          <Typography variant="body1">{message}</Typography>
          <IconButton
            size="small"
            aria-label="close"
            sx={{ color: 'white' }}
            onClick={() => closeSnackbar(key)}
          >
            <CloseIcon fontSize="small" />
          </IconButton>
        </Paper>
      ),
      anchorOrigin: {
        vertical: 'top',
        horizontal: 'right'
      }
    });
  };

  const showActionNotification = () => {
    enqueueSnackbar('Item will be deleted', {
      variant: 'warning',
      action: (snackbarId) => (
        <Stack direction="row" spacing={1}>
          <Button
            size="small"
            color="inherit"
            onClick={() => {
              showSuccess('Action cancelled');
              closeSnackbar(snackbarId);
            }}
          >
            Undo
          </Button>
          <IconButton
            size="small"
            aria-label="close"
            color="inherit"
            onClick={() => closeSnackbar(snackbarId)}
          >
            <CloseIcon fontSize="small" />
          </IconButton>
        </Stack>
      ),
      anchorOrigin: {
        vertical: 'bottom',
        horizontal: 'left'
      }
    });
  };

  return (
    <Box sx={{ padding: 3, maxWidth: 600, margin: '0 auto' }}>
      <Typography variant="h4" gutterBottom>
        Advanced Notification System
      </Typography>

      <Paper elevation={2} sx={{ p: 3, mb: 3 }}>
        <form onSubmit={handleSubmit}>
          <Stack spacing={2}>
            <TextField
              label="Message"
              name="message"
              value={formData.message}
              onChange={handleInputChange}
              fullWidth
              required
            />

            <FormControl fullWidth>
              <InputLabel>Variant</InputLabel>
              <Select
                name="variant"
                value={formData.variant}
                onChange={handleInputChange}
                label="Variant"
              >
                <MenuItem value="success">Success</MenuItem>
                <MenuItem value="error">Error</MenuItem>
                <MenuItem value="warning">Warning</MenuItem>
                <MenuItem value="info">Info</MenuItem>
              </Select>
            </FormControl>

            <TextField
              label="Duration (ms)"
              name="duration"
              type="number"
              value={formData.duration}
              onChange={handleInputChange}
              fullWidth
              helperText="0 for persistent notification"
            />

            <Button type="submit" variant="contained" fullWidth>
              Show Notification
            </Button>
          </Stack>
        </form>
      </Paper>

      <Stack spacing={2}>
        <Button
          variant="outlined"
          onClick={simulateApiCall}
          fullWidth
        >
          Simulate API Call
        </Button>
        <Button
          variant="outlined"
          color="secondary"
          onClick={showCustomContent}
          fullWidth
        >
          Show Custom Content
        </Button>
        <Button
          variant="outlined"
          color="warning"
          onClick={showActionNotification}
          fullWidth
        >
          Show Action Notification
        </Button>
      </Stack>
    </Box>
  );
}

export default AdvancedNotificationSystem;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import { SnackbarProvider } from 'notistack';
import AdvancedNotificationSystem from './AdvancedNotificationSystem';
import './App.css';

function App() {
  return (
    <SnackbarProvider
      maxSnack={3}
      anchorOrigin={{
        vertical: 'top',
        horizontal: 'right'
      }}
    >
      <div className="App">
        <AdvancedNotificationSystem />
      </div>
    </SnackbarProvider>
  );
}

export default App;

Common Issues / Troubleshooting

Notifications not displaying: Ensure SnackbarProvider wraps your app at the root level. The provider must be a parent of components using useSnackbar.
Material-UI theme not applied: Notistack uses Material-UI components, so make sure you have a ThemeProvider wrapping your app if you're using custom themes.
Action buttons not working: Make sure action functions receive the snackbarId parameter and use closeSnackbar(snackbarId) to close the notification.
Notifications stacking incorrectly: Use the maxSnack prop on SnackbarProvider to control how many notifications show at once. Adjust anchorOrigin for positioning.
Custom content not rendering: When using the content option, the function receives (key, message) parameters. Return a valid React element.
Persistent notifications: Set persist: true in options to prevent auto-dismissal. Always provide a close button for persistent notifications.

Next Steps

Now that you have an advanced understanding of Notistack:

Explore Material-UI theme customization for notifications
Learn about notification queues and limits
Implement notification persistence and storage
Add sound effects or other interactive features
Integrate with React Context for global notification management
Learn about other notification libraries (react-toastify, react-notifications-component)
Check the official documentation: https://iamhosseindhv.com/notistack
Look for part 34 of this series for more advanced topics

Summary

You've successfully integrated Notistack into your React application with advanced features including custom hooks, action buttons, custom content, and async operation handling. Notistack provides a powerful, Material-UI-based solution for displaying snackbar notifications with extensive customization options.

SEO Keywords

notistack
React Material-UI notifications
notistack tutorial
React snackbar library
notistack installation
React toast notifications
notistack example
React notification system
notistack setup
React Material-UI snackbar
notistack hooks
React notification queue
notistack customization
React notification library
notistack getting started

Building Notification Systems with react-notifications-component in React

James Parker — Mon, 19 Jan 2026 16:28:11 +0000

react-notifications-component is a powerful React library for displaying toast notifications and alerts in your application. It provides a flexible notification system with customizable animations, positioning, and styling options. This guide walks through setting up and creating notification systems using react-notifications-component with React, from installation to a working implementation. This is part 32 of a series on using react-notifications-component with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect, useCallback)
Familiarity with JavaScript/TypeScript
Understanding of CSS for styling

Installation

Install react-notifications-component and its dependencies:

npm install react-notifications-component

Or with yarn:

yarn add react-notifications-component

Or with pnpm:

pnpm add react-notifications-component

After installation, your package.json should include:

{
  "dependencies": {
    "react-notifications-component": "^4.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Set up the notification container in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import ReactNotification from 'react-notifications-component';
import 'react-notifications-component/dist/theme.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
    <ReactNotification />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple notification component. Create a new file src/NotificationExample.jsx:

// src/NotificationExample.jsx
import React from 'react';
import { store } from 'react-notifications-component';

function NotificationExample() {
  const showSuccessNotification = () => {
    store.addNotification({
      title: 'Success!',
      message: 'Operation completed successfully.',
      type: 'success',
      insert: 'top',
      container: 'top-right',
      animationIn: ['animate__animated', 'animate__fadeIn'],
      animationOut: ['animate__animated', 'animate__fadeOut'],
      dismiss: {
        duration: 3000,
        onScreen: true
      }
    });
  };

  const showErrorNotification = () => {
    store.addNotification({
      title: 'Error!',
      message: 'Something went wrong.',
      type: 'danger',
      insert: 'top',
      container: 'top-right',
      animationIn: ['animate__animated', 'animate__fadeIn'],
      animationOut: ['animate__animated', 'animate__fadeOut'],
      dismiss: {
        duration: 5000,
        onScreen: true
      }
    });
  };

  const showWarningNotification = () => {
    store.addNotification({
      title: 'Warning!',
      message: 'Please review your input.',
      type: 'warning',
      insert: 'top',
      container: 'top-right',
      animationIn: ['animate__animated', 'animate__fadeIn'],
      animationOut: ['animate__animated', 'animate__fadeOut'],
      dismiss: {
        duration: 4000,
        onScreen: true
      }
    });
  };

  const showInfoNotification = () => {
    store.addNotification({
      title: 'Info',
      message: 'Here is some information.',
      type: 'info',
      insert: 'top',
      container: 'top-right',
      animationIn: ['animate__animated', 'animate__fadeIn'],
      animationOut: ['animate__animated', 'animate__fadeOut'],
      dismiss: {
        duration: 3000,
        onScreen: true
      }
    });
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Notification Examples</h2>
      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
        <button onClick={showSuccessNotification}>Success</button>
        <button onClick={showErrorNotification}>Error</button>
        <button onClick={showWarningNotification}>Warning</button>
        <button onClick={showInfoNotification}>Info</button>
      </div>
    </div>
  );
}

export default NotificationExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import NotificationExample from './NotificationExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <NotificationExample />
    </div>
  );
}

export default App;

Understanding the Basics

react-notifications-component uses a store-based API where:

store: Global notification store that manages all notifications
addNotification: Method to add a new notification
removeNotification: Method to remove a notification by ID
Container positions: top-left, top-right, top-center, bottom-left, bottom-right, bottom-center
Notification types: success, danger, warning, info, default
Animations: Uses animate.css classes for animations

Key concepts:

Store API: Notifications are managed through a global store
Positioning: Notifications can be positioned in different corners
Animations: Custom animations using CSS classes
Dismissal: Automatic or manual dismissal with callbacks
Customization: Extensive styling and content customization options

Here's an example with custom styling and actions:

// src/CustomNotificationExample.jsx
import React from 'react';
import { store } from 'react-notifications-component';

function CustomNotificationExample() {
  const showCustomNotification = () => {
    const notificationId = store.addNotification({
      title: 'Custom Notification',
      message: 'This is a custom styled notification with actions.',
      type: 'info',
      insert: 'top',
      container: 'top-right',
      animationIn: ['animate__animated', 'animate__fadeIn'],
      animationOut: ['animate__animated', 'animate__fadeOut'],
      dismiss: {
        duration: 0, // Don't auto-dismiss
        onScreen: true,
        showIcon: true
      },
      content: (
        <div style={{ padding: '10px' }}>
          <strong>Custom Content</strong>
          <p>You can add any React component here.</p>
          <button
            onClick={() => store.removeNotification(notificationId)}
            style={{
              padding: '5px 10px',
              backgroundColor: '#007bff',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer',
              marginTop: '10px'
            }}
          >
            Dismiss
          </button>
        </div>
      )
    });
  };

  const showActionNotification = () => {
    store.addNotification({
      title: 'Action Required',
      message: 'Do you want to proceed?',
      type: 'warning',
      insert: 'top',
      container: 'top-center',
      animationIn: ['animate__animated', 'animate__slideInDown'],
      animationOut: ['animate__animated', 'animate__slideOutUp'],
      dismiss: {
        duration: 0,
        onScreen: true
      },
      actions: [
        {
          name: 'Yes',
          onClick: () => {
            store.addNotification({
              title: 'Confirmed!',
              message: 'Action confirmed.',
              type: 'success',
              insert: 'top',
              container: 'top-right',
              dismiss: { duration: 2000 }
            });
          },
          style: { backgroundColor: '#28a745', color: 'white' }
        },
        {
          name: 'No',
          onClick: () => {
            store.addNotification({
              title: 'Cancelled',
              message: 'Action cancelled.',
              type: 'info',
              insert: 'top',
              container: 'top-right',
              dismiss: { duration: 2000 }
            });
          },
          style: { backgroundColor: '#dc3545', color: 'white' }
        }
      ]
    });
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Custom Notifications</h2>
      <div style={{ display: 'flex', gap: '10px' }}>
        <button onClick={showCustomNotification}>Custom Content</button>
        <button onClick={showActionNotification}>Action Buttons</button>
      </div>
    </div>
  );
}

export default CustomNotificationExample;

Practical Example / Building Something Real

Let's build a comprehensive notification system with a custom hook and different notification types:

// src/hooks/useNotification.js
import { useCallback } from 'react';
import { store } from 'react-notifications-component';

export const useNotification = () => {
  const showSuccess = useCallback((title, message, options = {}) => {
    store.addNotification({
      title,
      message,
      type: 'success',
      insert: 'top',
      container: 'top-right',
      animationIn: ['animate__animated', 'animate__fadeIn'],
      animationOut: ['animate__animated', 'animate__fadeOut'],
      dismiss: {
        duration: 3000,
        onScreen: true
      },
      ...options
    });
  }, []);

  const showError = useCallback((title, message, options = {}) => {
    store.addNotification({
      title,
      message,
      type: 'danger',
      insert: 'top',
      container: 'top-right',
      animationIn: ['animate__animated', 'animate__fadeIn'],
      animationOut: ['animate__animated', 'animate__fadeOut'],
      dismiss: {
        duration: 5000,
        onScreen: true
      },
      ...options
    });
  }, []);

  const showWarning = useCallback((title, message, options = {}) => {
    store.addNotification({
      title,
      message,
      type: 'warning',
      insert: 'top',
      container: 'top-right',
      animationIn: ['animate__animated', 'animate__fadeIn'],
      animationOut: ['animate__animated', 'animate__fadeOut'],
      dismiss: {
        duration: 4000,
        onScreen: true
      },
      ...options
    });
  }, []);

  const showInfo = useCallback((title, message, options = {}) => {
    store.addNotification({
      title,
      message,
      type: 'info',
      insert: 'top',
      container: 'top-right',
      animationIn: ['animate__animated', 'animate__fadeIn'],
      animationOut: ['animate__animated', 'animate__fadeOut'],
      dismiss: {
        duration: 3000,
        onScreen: true
      },
      ...options
    });
  }, []);

  return {
    showSuccess,
    showError,
    showWarning,
    showInfo
  };
};

Now create a component that uses the notification hook:

// src/NotificationSystem.jsx
import React, { useState } from 'react';
import { useNotification } from './hooks/useNotification';

function NotificationSystem() {
  const { showSuccess, showError, showWarning, showInfo } = useNotification();
  const [formData, setFormData] = useState({
    title: '',
    message: '',
    type: 'success'
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!formData.title || !formData.message) {
      showError('Validation Error', 'Please fill in all fields.');
      return;
    }

    switch (formData.type) {
      case 'success':
        showSuccess(formData.title, formData.message);
        break;
      case 'error':
        showError(formData.title, formData.message);
        break;
      case 'warning':
        showWarning(formData.title, formData.message);
        break;
      case 'info':
        showInfo(formData.title, formData.message);
        break;
      default:
        showInfo(formData.title, formData.message);
    }

    setFormData({ title: '', message: '', type: 'success' });
  };

  const simulateApiCall = async () => {
    showInfo('Loading', 'Processing your request...', {
      dismiss: { duration: 0 }
    });

    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 2000));

      // Remove loading notification and show success
      showSuccess('Success', 'Operation completed successfully!');
    } catch (error) {
      showError('Error', 'Failed to complete operation. Please try again.');
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '500px' }}>
      <h1>Notification System</h1>

      <form onSubmit={handleSubmit} style={{ marginBottom: '20px' }}>
        <div style={{ marginBottom: '16px' }}>
          <label style={{ display: 'block', marginBottom: '4px' }}>
            Title *
          </label>
          <input
            type="text"
            name="title"
            value={formData.title}
            onChange={handleInputChange}
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              boxSizing: 'border-box'
            }}
            required
          />
        </div>

        <div style={{ marginBottom: '16px' }}>
          <label style={{ display: 'block', marginBottom: '4px' }}>
            Message *
          </label>
          <textarea
            name="message"
            value={formData.message}
            onChange={handleInputChange}
            rows={3}
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              boxSizing: 'border-box',
              resize: 'vertical'
            }}
            required
          />
        </div>

        <div style={{ marginBottom: '16px' }}>
          <label style={{ display: 'block', marginBottom: '4px' }}>
            Type
          </label>
          <select
            name="type"
            value={formData.type}
            onChange={handleInputChange}
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              boxSizing: 'border-box'
            }}
          >
            <option value="success">Success</option>
            <option value="error">Error</option>
            <option value="warning">Warning</option>
            <option value="info">Info</option>
          </select>
        </div>

        <button
          type="submit"
          style={{
            width: '100%',
            padding: '10px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '16px'
          }}
        >
          Show Notification
        </button>
      </form>

      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        <button
          onClick={() => showSuccess('Quick Success', 'This is a quick success message!')}
          style={{
            padding: '10px',
            backgroundColor: '#28a745',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Quick Success
        </button>
        <button
          onClick={() => showError('Quick Error', 'This is a quick error message!')}
          style={{
            padding: '10px',
            backgroundColor: '#dc3545',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Quick Error
        </button>
        <button
          onClick={simulateApiCall}
          style={{
            padding: '10px',
            backgroundColor: '#ffc107',
            color: 'black',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Simulate API Call
        </button>
      </div>
    </div>
  );
}

export default NotificationSystem;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import NotificationSystem from './NotificationSystem';
import './App.css';

function App() {
  return (
    <div className="App">
      <NotificationSystem />
    </div>
  );
}

export default App;

Common Issues / Troubleshooting

Notifications not displaying: Ensure ReactNotification component is rendered in your app. It should be placed at the root level, typically in your main entry file.
Animations not working: Make sure you have animate.css installed or use custom animation classes. The library uses CSS classes for animations.
Notifications stacking incorrectly: Use the insert property to control stacking order ('top' or 'bottom'). Use container to set position.
Custom content not rendering: When using the content property, make sure to return valid React elements. The content property accepts JSX.
Notifications not dismissing: Check the dismiss configuration. Set duration: 0 to prevent auto-dismissal, or specify a duration in milliseconds.
Multiple notification containers: You can have multiple ReactNotification components with different container IDs to show notifications in different positions simultaneously.

Next Steps

Now that you have an understanding of react-notifications-component:

Explore advanced customization options
Learn about custom animations and transitions
Implement notification queues and limits
Add sound effects or other interactive features
Integrate with React Context for global notification management
Learn about other notification libraries (notistack, react-toastify)
Check the official repository: https://github.com/teodosii/react-notifications-component
Look for part 33 of this series for more advanced topics

Summary

You've successfully set up react-notifications-component in your React application and created a notification system with custom hooks and different notification types. The library provides a flexible API for displaying toast notifications with extensive customization options.

SEO Keywords

react-notifications-component
React toast notifications
react-notifications-component tutorial
React notification system
react-notifications-component installation
React alert notifications
react-notifications-component example
React toast messages
react-notifications-component setup
React notification hooks
react-notifications-component customization
React notification library
react-notifications-component store
React toast library
react-notifications-component getting started

Using React Components in SweetAlert2 with sweetalert2-react-content

James Parker — Mon, 19 Jan 2026 16:26:38 +0000

sweetalert2-react-content is a library that allows you to use React components as content inside SweetAlert2 modals. This enables you to leverage the full power of React components, hooks, and state management within your alert dialogs, making them more interactive and dynamic. This guide walks through setting up and using React components in SweetAlert2 dialogs with sweetalert2-react-content. This is part 31 of a series on using sweetalert2-react-content with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React components and hooks (useState)
Familiarity with SweetAlert2
Understanding of JavaScript/TypeScript

Installation

Install sweetalert2-react-content and its dependencies:

npm install sweetalert2 sweetalert2-react-content react react-dom

Or with yarn:

yarn add sweetalert2 sweetalert2-react-content react react-dom

Or with pnpm:

pnpm add sweetalert2 sweetalert2-react-content react react-dom

After installation, your package.json should include:

{
  "dependencies": {
    "sweetalert2": "^11.0.0",
    "sweetalert2-react-content": "^5.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Import SweetAlert2 styles and set up the React content wrapper. Update your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'sweetalert2/dist/sweetalert2.min.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple React component and use it in a SweetAlert2 dialog. First, create a simple component:

// src/SimpleReactContent.jsx
import React from 'react';

function SimpleReactContent() {
  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h3>Hello from React!</h3>
      <p>This content is rendered using a React component inside SweetAlert2.</p>
    </div>
  );
}

export default SimpleReactContent;

Now, create a component that opens the alert with React content:

// src/App.jsx
import React from 'react';
import Swal from 'sweetalert2';
import withReactContent from 'sweetalert2-react-content';
import SimpleReactContent from './SimpleReactContent';
import './App.css';

const MySwal = withReactContent(Swal);

function App() {
  const showReactAlert = () => {
    MySwal.fire({
      title: 'React Content Alert',
      html: <SimpleReactContent />,
      showConfirmButton: true,
      confirmButtonText: 'OK'
    });
  };

  return (
    <div className="App" style={{ padding: '20px' }}>
      <h1>SweetAlert2 with React Content</h1>
      <button
        onClick={showReactAlert}
        style={{
          padding: '10px 20px',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        Show React Alert
      </button>
    </div>
  );
}

export default App;

This creates a basic alert that displays React component content inside a SweetAlert2 modal.

Understanding the Basics

sweetalert2-react-content works by:

withReactContent: Wraps SweetAlert2 to enable React component rendering
React Components: You can pass React components directly to the html property
State Management: React components can use hooks and manage their own state
Event Handling: Components can handle events and interact with the parent

Key concepts:

Wrapper Function: withReactContent(Swal) creates a new Swal instance that supports React
Component as HTML: Pass React components to the html property instead of strings
State Isolation: Each alert instance has its own React component instance
Lifecycle: Components mount when the alert opens and unmount when it closes

Here's an example with interactive React content:

// src/InteractiveContent.jsx
import React, { useState } from 'react';

function InteractiveContent() {
  const [count, setCount] = useState(0);

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h3>Interactive Counter</h3>
      <p>Count: {count}</p>
      <div style={{ display: 'flex', gap: '10px', justifyContent: 'center' }}>
        <button
          onClick={() => setCount(count - 1)}
          style={{
            padding: '8px 16px',
            backgroundColor: '#dc3545',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Decrease
        </button>
        <button
          onClick={() => setCount(count + 1)}
          style={{
            padding: '8px 16px',
            backgroundColor: '#28a745',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Increase
        </button>
      </div>
    </div>
  );
}

export default InteractiveContent;

Update App.jsx to use the interactive component:

// src/App.jsx
import React from 'react';
import Swal from 'sweetalert2';
import withReactContent from 'sweetalert2-react-content';
import SimpleReactContent from './SimpleReactContent';
import InteractiveContent from './InteractiveContent';
import './App.css';

const MySwal = withReactContent(Swal);

function App() {
  const showReactAlert = () => {
    MySwal.fire({
      title: 'React Content Alert',
      html: <SimpleReactContent />,
      showConfirmButton: true,
      confirmButtonText: 'OK'
    });
  };

  const showInteractiveAlert = () => {
    MySwal.fire({
      title: 'Interactive React Content',
      html: <InteractiveContent />,
      showConfirmButton: true,
      confirmButtonText: 'Close',
      width: '500px'
    });
  };

  return (
    <div className="App" style={{ padding: '20px' }}>
      <h1>SweetAlert2 with React Content</h1>
      <div style={{ display: 'flex', gap: '10px' }}>
        <button
          onClick={showReactAlert}
          style={{
            padding: '10px 20px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Show Simple Alert
        </button>
        <button
          onClick={showInteractiveAlert}
          style={{
            padding: '10px 20px',
            backgroundColor: '#28a745',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Show Interactive Alert
        </button>
      </div>
    </div>
  );
}

export default App;

Practical Example / Building Something Real

Let's build a contact form component that can be used inside a SweetAlert2 modal:

// src/ContactForm.jsx
import React, { useState } from 'react';

function ContactForm({ onClose }) {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  const [errors, setErrors] = useState({});

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    if (errors[name]) {
      setErrors(prev => ({ ...prev, [name]: '' }));
    }
  };

  const validateForm = () => {
    const newErrors = {};
    if (!formData.name.trim()) {
      newErrors.name = 'Name is required';
    }
    if (!formData.email.trim()) {
      newErrors.email = 'Email is required';
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      newErrors.email = 'Invalid email format';
    }
    if (!formData.message.trim()) {
      newErrors.message = 'Message is required';
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validateForm()) {
      console.log('Form submitted:', formData);
      alert('Message sent successfully!');
      onClose();
    }
  };

  return (
    <form onSubmit={handleSubmit} style={{ padding: '20px', minWidth: '400px' }}>
      <div style={{ marginBottom: '16px' }}>
        <label
          htmlFor="name"
          style={{
            display: 'block',
            marginBottom: '4px',
            fontWeight: '500'
          }}
        >
          Name *
        </label>
        <input
          type="text"
          id="name"
          name="name"
          value={formData.name}
          onChange={handleInputChange}
          style={{
            width: '100%',
            padding: '8px',
            border: `1px solid ${errors.name ? '#dc3545' : '#ddd'}`,
            borderRadius: '4px',
            fontSize: '14px',
            boxSizing: 'border-box'
          }}
        />
        {errors.name && (
          <div
            style={{
              color: '#dc3545',
              fontSize: '12px',
              marginTop: '4px'
            }}
          >
            {errors.name}
          </div>
        )}
      </div>

      <div style={{ marginBottom: '16px' }}>
        <label
          htmlFor="email"
          style={{
            display: 'block',
            marginBottom: '4px',
            fontWeight: '500'
          }}
        >
          Email *
        </label>
        <input
          type="email"
          id="email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
          style={{
            width: '100%',
            padding: '8px',
            border: `1px solid ${errors.email ? '#dc3545' : '#ddd'}`,
            borderRadius: '4px',
            fontSize: '14px',
            boxSizing: 'border-box'
          }}
        />
        {errors.email && (
          <div
            style={{
              color: '#dc3545',
              fontSize: '12px',
              marginTop: '4px'
            }}
          >
            {errors.email}
          </div>
        )}
      </div>

      <div style={{ marginBottom: '16px' }}>
        <label
          htmlFor="message"
          style={{
            display: 'block',
            marginBottom: '4px',
            fontWeight: '500'
          }}
        >
          Message *
        </label>
        <textarea
          id="message"
          name="message"
          value={formData.message}
          onChange={handleInputChange}
          rows={4}
          style={{
            width: '100%',
            padding: '8px',
            border: `1px solid ${errors.message ? '#dc3545' : '#ddd'}`,
            borderRadius: '4px',
            fontSize: '14px',
            resize: 'vertical',
            fontFamily: 'inherit',
            boxSizing: 'border-box'
          }}
        />
        {errors.message && (
          <div
            style={{
              color: '#dc3545',
              fontSize: '12px',
              marginTop: '4px'
            }}
          >
            {errors.message}
          </div>
        )}
      </div>

      <div style={{ display: 'flex', gap: '10px', justifyContent: 'flex-end' }}>
        <button
          type="button"
          onClick={onClose}
          style={{
            padding: '8px 16px',
            border: '1px solid #ddd',
            backgroundColor: 'white',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Cancel
        </button>
        <button
          type="submit"
          style={{
            padding: '8px 16px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Send Message
        </button>
      </div>
    </form>
  );
}

export default ContactForm;

Now update App.jsx to use the contact form:

// src/App.jsx
import React from 'react';
import Swal from 'sweetalert2';
import withReactContent from 'sweetalert2-react-content';
import ContactForm from './ContactForm';
import './App.css';

const MySwal = withReactContent(Swal);

function App() {
  const showContactForm = () => {
    MySwal.fire({
      title: 'Contact Us',
      html: <ContactForm onClose={() => MySwal.close()} />,
      showConfirmButton: false,
      showCancelButton: false,
      width: '500px',
      allowOutsideClick: true,
      allowEscapeKey: true
    });
  };

  return (
    <div className="App" style={{ padding: '20px' }}>
      <h1>SweetAlert2 with React Content</h1>
      <button
        onClick={showContactForm}
        style={{
          padding: '10px 20px',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer',
          fontSize: '16px'
        }}
      >
        Open Contact Form
      </button>
    </div>
  );
}

export default App;

This example demonstrates:

Form handling with validation
Error display and styling
React state management inside alerts
Event handling and callbacks
Custom styling with inline styles
Integration with SweetAlert2 close functionality

Common Issues / Troubleshooting

React component not rendering: Make sure you're using withReactContent(Swal) to create the Swal instance. Regular Swal.fire() doesn't support React components.
State not updating: React components in alerts have isolated state. Each alert instance creates a new component instance. If you need shared state, use React Context or external state management.
Event handlers not working: Ensure event handlers are properly defined in your React components. SweetAlert2 doesn't interfere with React event handling.
Styling issues: Use inline styles or CSS classes in your React components. SweetAlert2's default styles may need to be overridden for custom components.
Component not closing: Pass a close function to your component (like onClose={() => MySwal.close()}) to allow programmatic closing from within the component.
Multiple alerts: Each alert creates a new React component instance. If you need to share data between alerts, use external state management or pass data through props.

Next Steps

Now that you have a basic understanding of sweetalert2-react-content:

Learn about passing props to React components in alerts
Explore advanced state management patterns
Implement custom animations and transitions
Add accessibility enhancements
Learn about other React alert libraries
Check the official repository: https://github.com/sweetalert2/sweetalert2-react-content
Look for part 32 of this series for more advanced topics

Summary

You've successfully set up sweetalert2-react-content in your React application and created interactive React components that work inside SweetAlert2 modals. This library enables you to leverage React's component model and state management within alert dialogs.

SEO Keywords

sweetalert2-react-content
React components in alerts
sweetalert2-react-content tutorial
React alert dialogs
sweetalert2-react-content installation
React modal components
sweetalert2-react-content example
React interactive alerts
sweetalert2-react-content setup
React form modals
sweetalert2-react-content hooks
React alert forms
sweetalert2-react-content state
React modal library
sweetalert2-react-content getting started