DEV Community: Oliver Reed

Advanced Alert Dialogs and Modals with SweetAlert2 in React

Oliver Reed — Fri, 16 Jan 2026 14:09:02 +0000

SweetAlert2 is a beautiful, responsive, customizable, and accessible replacement for JavaScript's popup boxes. It provides a modern alternative to native browser alerts with extensive customization options, animations, and support for complex interactions like forms, file uploads, and async operations. This guide walks through advanced usage of SweetAlert2 with React, including custom configurations, React hooks integration, and complex dialog patterns. This is part 30 of a series on using SweetAlert2 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 async/await and Promises
Understanding of CSS for custom styling

Installation

Install SweetAlert2 using your preferred package manager:

npm install sweetalert2

Or with yarn:

yarn add sweetalert2

Or with pnpm:

pnpm add sweetalert2

You may also want to install the React wrapper for better integration:

npm install @sweetalert2/with-react

After installation, your package.json should include:

{
  "dependencies": {
    "sweetalert2": "^11.0.0",
    "@sweetalert2/with-react": "^5.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Import SweetAlert2 styles in your main entry file or component:

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

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

Or if using CSS instead of SCSS:

// src/index.js
import 'sweetalert2/dist/sweetalert2.min.css';

First Example / Basic Usage

Let's create a simple alert component. Create a new file src/AlertExample.jsx:

// src/AlertExample.jsx
import React from 'react';
import Swal from 'sweetalert2';

function AlertExample() {
  const showSuccessAlert = () => {
    Swal.fire({
      title: 'Success!',
      text: 'Operation completed successfully.',
      icon: 'success',
      confirmButtonText: 'OK'
    });
  };

  const showErrorAlert = () => {
    Swal.fire({
      title: 'Error!',
      text: 'Something went wrong.',
      icon: 'error',
      confirmButtonText: 'OK'
    });
  };

  const showWarningAlert = () => {
    Swal.fire({
      title: 'Warning!',
      text: 'Please review your input.',
      icon: 'warning',
      confirmButtonText: 'OK'
    });
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Basic SweetAlert2 Examples</h2>
      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
        <button onClick={showSuccessAlert}>Success Alert</button>
        <button onClick={showErrorAlert}>Error Alert</button>
        <button onClick={showWarningAlert}>Warning Alert</button>
      </div>
    </div>
  );
}

export default AlertExample;

Understanding the Basics

SweetAlert2 provides several key features:

Promise-based API: All alerts return promises that resolve with user actions
Multiple button types: confirm, deny, cancel buttons
Custom HTML: Full HTML support in alert content
Input support: Text, email, password, number, select, radio, checkbox, file inputs
Validation: Built-in and custom validation functions
Animations: Customizable animations and transitions
Theming: Extensive styling options

Key concepts for React integration:

Async/Await: Use async/await for cleaner code with user interactions
State Management: Integrate with React state for dynamic content
Custom Hooks: Create reusable hooks for common alert patterns
Error Handling: Proper error handling in async operations

Here's an example with confirmation dialogs:

// src/ConfirmationExample.jsx
import React from 'react';
import Swal from 'sweetalert2';

function ConfirmationExample() {
  const handleDelete = async () => {
    const result = await Swal.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!',
      cancelButtonText: 'Cancel'
    });

    if (result.isConfirmed) {
      // Perform delete operation
      await Swal.fire('Deleted!', 'Your item has been deleted.', 'success');
    } else if (result.isDismissed) {
      // User cancelled
      Swal.fire('Cancelled', 'Your item is safe.', 'info');
    }
  };

  const handleSave = async () => {
    const result = await Swal.fire({
      title: 'Do you want to save the changes?',
      showDenyButton: true,
      showCancelButton: true,
      confirmButtonText: 'Save',
      denyButtonText: "Don't save",
      cancelButtonText: 'Cancel'
    });

    if (result.isConfirmed) {
      // Save operation
      await Swal.fire('Saved!', '', 'success');
    } else if (result.isDenied) {
      Swal.fire('Changes are not saved', '', 'info');
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Confirmation Dialogs</h2>
      <div style={{ display: 'flex', gap: '10px' }}>
        <button onClick={handleDelete}>Delete Item</button>
        <button onClick={handleSave}>Save Changes</button>
      </div>
    </div>
  );
}

export default ConfirmationExample;

Practical Example / Building Something Real

Let's build a comprehensive form modal with validation, file upload, and async operations:

// src/AdvancedFormModal.jsx
import React, { useState, useCallback } from 'react';
import Swal from 'sweetalert2';

function AdvancedFormModal() {
  const [isProcessing, setIsProcessing] = useState(false);

  const showUserForm = useCallback(async () => {
    const { value: formValues } = await Swal.fire({
      title: 'Create New User',
      html: `
        <input id="swal-input1" class="swal2-input" placeholder="First Name" required>
        <input id="swal-input2" class="swal2-input" placeholder="Last Name" required>
        <input id="swal-input3" class="swal2-input" type="email" placeholder="Email" required>
        <input id="swal-input4" class="swal2-input" type="tel" placeholder="Phone Number">
        <select id="swal-input5" class="swal2-select">
          <option value="">Select Role</option>
          <option value="admin">Admin</option>
          <option value="user">User</option>
          <option value="guest">Guest</option>
        </select>
      `,
      focusConfirm: false,
      showCancelButton: true,
      confirmButtonText: 'Create User',
      cancelButtonText: 'Cancel',
      preConfirm: () => {
        const firstName = document.getElementById('swal-input1').value.trim();
        const lastName = document.getElementById('swal-input2').value.trim();
        const email = document.getElementById('swal-input3').value.trim();
        const phone = document.getElementById('swal-input4').value.trim();
        const role = document.getElementById('swal-input5').value;

        // Validation
        if (!firstName) {
          Swal.showValidationMessage('First name is required');
          return false;
        }
        if (!lastName) {
          Swal.showValidationMessage('Last name is required');
          return false;
        }
        if (!email) {
          Swal.showValidationMessage('Email is required');
          return false;
        }
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
          Swal.showValidationMessage('Please enter a valid email address');
          return false;
        }
        if (!role) {
          Swal.showValidationMessage('Please select a role');
          return false;
        }

        return {
          firstName,
          lastName,
          email,
          phone,
          role
        };
      },
      didOpen: () => {
        // Focus first input
        document.getElementById('swal-input1').focus();
      }
    });

    if (formValues) {
      await handleCreateUser(formValues);
    }
  }, []);

  const handleCreateUser = async (userData) => {
    setIsProcessing(true);

    // Show loading state
    Swal.fire({
      title: 'Creating user...',
      allowOutsideClick: false,
      didOpen: () => {
        Swal.showLoading();
      }
    });

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

      // Simulate success
      await Swal.fire({
        icon: 'success',
        title: 'User Created!',
        html: `
          <p><strong>Name:</strong> ${userData.firstName} ${userData.lastName}</p>
          <p><strong>Email:</strong> ${userData.email}</p>
          <p><strong>Role:</strong> ${userData.role}</p>
        `,
        confirmButtonText: 'OK'
      });
    } catch (error) {
      await Swal.fire({
        icon: 'error',
        title: 'Error',
        text: 'Failed to create user. Please try again.',
        confirmButtonText: 'OK'
      });
    } finally {
      setIsProcessing(false);
    }
  };

  const showFileUpload = useCallback(async () => {
    const { value: file } = await Swal.fire({
      title: 'Upload Profile Picture',
      input: 'file',
      inputAttributes: {
        accept: 'image/*',
        'aria-label': 'Upload your profile picture'
      },
      showCancelButton: true,
      confirmButtonText: 'Upload',
      cancelButtonText: 'Cancel'
    });

    if (file) {
      const reader = new FileReader();
      reader.onload = async (e) => {
        await Swal.fire({
          title: 'Preview',
          imageUrl: e.target.result,
          imageAlt: 'Uploaded picture',
          showConfirmButton: true,
          confirmButtonText: 'Use this image'
        });
      };
      reader.readAsDataURL(file);
    }
  }, []);

  const showAsyncOperation = useCallback(async () => {
    let timerInterval;

    const result = await Swal.fire({
      title: 'Processing your request',
      html: 'This will take a few seconds...',
      timer: 5000,
      timerProgressBar: true,
      didOpen: () => {
        Swal.showLoading();
        const timer = Swal.getPopup().querySelector('b');
        timerInterval = setInterval(() => {
          timer.textContent = Swal.getTimerLeft();
        }, 100);
      },
      willClose: () => {
        clearInterval(timerInterval);
      }
    });

    if (result.dismiss === Swal.DismissReason.timer) {
      await Swal.fire({
        icon: 'success',
        title: 'Operation completed!',
        text: 'Your request has been processed.',
        confirmButtonText: 'OK'
      });
    }
  }, []);

  const showCustomStyled = useCallback(() => {
    Swal.fire({
      title: 'Custom Styled Alert',
      text: 'This alert has custom styling',
      icon: 'info',
      customClass: {
        popup: 'custom-popup',
        title: 'custom-title',
        confirmButton: 'custom-confirm-button'
      },
      buttonsStyling: false,
      confirmButtonText: 'Got it!',
      background: '#f0f0f0',
      color: '#333'
    });
  }, []);

  return (
    <div style={{ padding: '20px' }}>
      <h1>Advanced SweetAlert2 Examples</h1>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', maxWidth: '300px' }}>
        <button
          onClick={showUserForm}
          disabled={isProcessing}
          style={{
            padding: '10px 20px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: isProcessing ? 'not-allowed' : 'pointer'
          }}
        >
          Create User Form
        </button>
        <button
          onClick={showFileUpload}
          style={{
            padding: '10px 20px',
            backgroundColor: '#28a745',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Upload File
        </button>
        <button
          onClick={showAsyncOperation}
          style={{
            padding: '10px 20px',
            backgroundColor: '#ffc107',
            color: 'black',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Async Operation
        </button>
        <button
          onClick={showCustomStyled}
          style={{
            padding: '10px 20px',
            backgroundColor: '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Custom Styled
        </button>
      </div>
    </div>
  );
}

export default AdvancedFormModal;

Now, create a custom React hook for reusable alert patterns:

// src/hooks/useSweetAlert.js
import { useCallback } from 'react';
import Swal from 'sweetalert2';

export const useSweetAlert = () => {
  const showSuccess = useCallback((title, text = '') => {
    return Swal.fire({
      icon: 'success',
      title,
      text,
      confirmButtonText: 'OK'
    });
  }, []);

  const showError = useCallback((title, text = '') => {
    return Swal.fire({
      icon: 'error',
      title,
      text,
      confirmButtonText: 'OK'
    });
  }, []);

  const showConfirm = useCallback(async (options) => {
    const result = await Swal.fire({
      title: options.title || 'Are you sure?',
      text: options.text || '',
      icon: options.icon || 'warning',
      showCancelButton: true,
      confirmButtonColor: options.confirmColor || '#3085d6',
      cancelButtonColor: options.cancelColor || '#d33',
      confirmButtonText: options.confirmText || 'Yes',
      cancelButtonText: options.cancelText || 'Cancel'
    });

    return result.isConfirmed;
  }, []);

  const showLoading = useCallback((title = 'Loading...') => {
    Swal.fire({
      title,
      allowOutsideClick: false,
      allowEscapeKey: false,
      didOpen: () => {
        Swal.showLoading();
      }
    });
  }, []);

  const closeAlert = useCallback(() => {
    Swal.close();
  }, []);

  return {
    showSuccess,
    showError,
    showConfirm,
    showLoading,
    closeAlert
  };
};

Update your App.jsx:

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

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

export default App;

Add custom styles in App.css:

/* src/App.css */
.custom-popup {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.custom-title {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
}

.custom-confirm-button {
  background-color: #007bff;
  border-radius: 6px;
  padding: 10px 24px;
  font-weight: 500;
}

Common Issues / Troubleshooting

Styles not loading: Make sure you import SweetAlert2 styles in your entry file. Use import 'sweetalert2/dist/sweetalert2.min.css' for CSS or import 'sweetalert2/src/sweetalert2.scss' for SCSS.
Promise handling: Always use await or .then() when you need to handle user responses. SweetAlert2 methods return promises.
Validation not working: Ensure preConfirm returns false or calls Swal.showValidationMessage() for invalid inputs. Return the data object for valid inputs.
Multiple alerts stacking: SweetAlert2 handles multiple alerts automatically, but you can prevent stacking by checking if an alert is already open using Swal.isVisible().
Custom HTML not rendering: Use the html property instead of text for HTML content. Be careful with XSS vulnerabilities when using user-generated content.
File upload issues: For file inputs, use the input: 'file' option and handle the FileReader API for previews. Remember that file inputs return File objects, not strings.

Next Steps

Now that you have an advanced understanding of SweetAlert2:

Explore advanced animations and transitions
Learn about custom themes and styling
Implement queue management for multiple alerts
Add internationalization (i18n) support
Integrate with React Context for global alert management
Learn about other notification libraries (react-toastify, notistack)
Check the official repository: https://github.com/sweetalert2/sweetalert2
Look for part 31 of this series for more advanced topics

Summary

You've successfully integrated SweetAlert2 into your React application with advanced features including form validation, file uploads, async operations, and custom styling. SweetAlert2 provides a powerful, accessible alternative to native browser alerts with extensive customization options.

SEO Keywords

sweetalert2
React alert library
sweetalert2 tutorial
React modal dialogs
sweetalert2 installation
React confirmation dialogs
sweetalert2 example
React alert notifications
sweetalert2 forms
React custom alerts
sweetalert2 validation
React async alerts
sweetalert2 file upload
React alert hooks
sweetalert2 getting started

Building Modal Dialogs with Reoverlay in React

Oliver Reed — Fri, 16 Jan 2026 14:07:41 +0000

Reoverlay is a powerful React library for managing modal dialogs and overlays declaratively. It provides a simple API for opening, closing, and managing multiple modals with built-in state management and lifecycle handling. This guide walks through setting up and creating modal dialogs using Reoverlay with React, from installation to a working implementation. This is part 29 of a series on using Reoverlay 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)
Familiarity with JavaScript/TypeScript

Installation

Install Reoverlay using your preferred package manager:

npm install reoverlay

Or with yarn:

yarn add reoverlay

Or with pnpm:

pnpm add reoverlay

After installation, your package.json should include:

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

Project Setup

Reoverlay requires a provider component at the root of your application. Update your main entry file:

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

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

First Example / Basic Usage

Let's create a simple modal component. First, create a modal component file src/SimpleModal.jsx:

// src/SimpleModal.jsx
import React from 'react';
import { ModalContainer, ModalHeader, ModalBody, ModalFooter } from 'reoverlay';

function SimpleModal({ closeModal }) {
  return (
    <ModalContainer>
      <ModalHeader>
        <h2>Simple Modal</h2>
      </ModalHeader>
      <ModalBody>
        <p>This is a simple modal dialog created with Reoverlay.</p>
      </ModalBody>
      <ModalFooter>
        <button onClick={closeModal}>Close</button>
      </ModalFooter>
    </ModalContainer>
  );
}

export default SimpleModal;

Now, create a component that opens the modal. Update your App.jsx:

// src/App.jsx
import React from 'react';
import { useReoverlay } from 'reoverlay';
import SimpleModal from './SimpleModal';
import './App.css';

function App() {
  const { openModal } = useReoverlay();

  const handleOpenModal = () => {
    openModal(SimpleModal);
  };

  return (
    <div className="App">
      <h1>Reoverlay Example</h1>
      <button onClick={handleOpenModal}>Open Modal</button>
    </div>
  );
}

export default App;

This creates a basic modal that opens when you click the button and closes when you click the close button.

Understanding the Basics

Reoverlay uses a declarative approach where:

ReoverlayProvider: Wraps your app and manages modal state
useReoverlay: Hook that provides openModal and closeModal functions
ModalContainer: Base component for modal structure
ModalHeader, ModalBody, ModalFooter: Pre-built sections for modal content
closeModal: Function passed to modal components to close them

Key concepts:

Declarative API: Open modals by passing the component directly
Automatic State Management: Reoverlay handles modal state internally
Component-based: Each modal is a React component
Lifecycle Management: Modals are automatically mounted/unmounted

Here's an example with custom styling:

// src/StyledModal.jsx
import React from 'react';
import { ModalContainer, ModalHeader, ModalBody, ModalFooter } from 'reoverlay';

function StyledModal({ closeModal }) {
  return (
    <ModalContainer
      style={{
        maxWidth: '500px',
        width: '90%',
        borderRadius: '8px',
        padding: '0'
      }}
    >
      <ModalHeader
        style={{
          padding: '20px',
          borderBottom: '1px solid #eee',
          backgroundColor: '#f8f9fa'
        }}
      >
        <h2 style={{ margin: 0 }}>Styled Modal</h2>
      </ModalHeader>
      <ModalBody style={{ padding: '20px' }}>
        <p>This modal has custom styling applied.</p>
      </ModalBody>
      <ModalFooter
        style={{
          padding: '20px',
          borderTop: '1px solid #eee',
          display: 'flex',
          justifyContent: 'flex-end',
          gap: '10px'
        }}
      >
        <button
          onClick={closeModal}
          style={{
            padding: '8px 16px',
            border: '1px solid #ddd',
            backgroundColor: 'white',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Cancel
        </button>
        <button
          onClick={closeModal}
          style={{
            padding: '8px 16px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Confirm
        </button>
      </ModalFooter>
    </ModalContainer>
  );
}

export default StyledModal;

Practical Example / Building Something Real

Let's build a contact form modal with validation and data handling:

// src/ContactModal.jsx
import React, { useState } from 'react';
import { ModalContainer, ModalHeader, ModalBody, ModalFooter } from 'reoverlay';

function ContactModal({ closeModal }) {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  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()) {
      return;
    }

    setIsSubmitting(true);
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000));
      console.log('Form submitted:', formData);
      alert('Message sent successfully!');
      closeModal();
      setFormData({ name: '', email: '', message: '' });
    } catch (error) {
      console.error('Error submitting form:', error);
      alert('Failed to send message. Please try again.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <ModalContainer
      style={{
        maxWidth: '500px',
        width: '90%',
        borderRadius: '8px',
        padding: '0'
      }}
    >
      <ModalHeader
        style={{
          padding: '20px',
          borderBottom: '1px solid #eee',
          backgroundColor: '#f8f9fa'
        }}
      >
        <h2 style={{ margin: 0 }}>Contact Us</h2>
      </ModalHeader>
      <ModalBody style={{ padding: '20px' }}>
        <form onSubmit={handleSubmit} id="contact-form">
          <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'
              }}
            />
            {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'
              }}
            />
            {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'
              }}
            />
            {errors.message && (
              <div
                style={{
                  color: '#dc3545',
                  fontSize: '12px',
                  marginTop: '4px'
                }}
              >
                {errors.message}
              </div>
            )}
          </div>
        </form>
      </ModalBody>
      <ModalFooter
        style={{
          padding: '20px',
          borderTop: '1px solid #eee',
          display: 'flex',
          justifyContent: 'flex-end',
          gap: '10px'
        }}
      >
        <button
          type="button"
          onClick={closeModal}
          disabled={isSubmitting}
          style={{
            padding: '8px 16px',
            border: '1px solid #ddd',
            backgroundColor: 'white',
            borderRadius: '4px',
            cursor: isSubmitting ? 'not-allowed' : 'pointer',
            opacity: isSubmitting ? 0.6 : 1
          }}
        >
          Cancel
        </button>
        <button
          type="submit"
          form="contact-form"
          disabled={isSubmitting}
          style={{
            padding: '8px 16px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: isSubmitting ? 'not-allowed' : 'pointer',
            opacity: isSubmitting ? 0.6 : 1
          }}
        >
          {isSubmitting ? 'Sending...' : 'Send Message'}
        </button>
      </ModalFooter>
    </ModalContainer>
  );
}

export default ContactModal;

Now update your App.jsx to use the contact modal:

// src/App.jsx
import React from 'react';
import { useReoverlay } from 'reoverlay';
import ContactModal from './ContactModal';
import './App.css';

function App() {
  const { openModal } = useReoverlay();

  const handleOpenContact = () => {
    openModal(ContactModal);
  };

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

export default App;

This example demonstrates:

Form handling with validation
Error display and styling
Async form submission
Loading states
Modal state management
Custom styling with inline styles

Common Issues / Troubleshooting

Modal not displaying: Ensure ReoverlayProvider wraps your app at the root level. Check that you're using useReoverlay hook inside a component that's a child of the provider.
closeModal not working: Make sure you're calling closeModal from the props passed to your modal component. The function is automatically provided by Reoverlay.
Multiple modals: Reoverlay supports multiple modals. You can open multiple modals by calling openModal multiple times. They will be stacked and closed in reverse order.
Styling issues: Use the style prop on ModalContainer and other modal components to customize appearance. For more complex styling, consider using CSS modules or styled-components.
TypeScript support: Reoverlay has TypeScript definitions. Make sure you're using the correct types for modal components and props.

Next Steps

Now that you have a basic understanding of Reoverlay:

Learn about passing props to modals
Explore advanced features like modal stacking
Implement custom animations and transitions
Add accessibility enhancements
Learn about other modal libraries (react-modal, react-aria-modal)
Check the official repository: https://github.com/hiradary/reoverlay
Look for part 30 of this series for more advanced topics

Summary

You've successfully set up Reoverlay in your React application and created modal dialogs with form handling and validation. Reoverlay provides a declarative API for managing modals with built-in state management and lifecycle handling.

SEO Keywords

reoverlay
React modal library
reoverlay tutorial
React overlay management
reoverlay installation
React declarative modals
reoverlay example
React modal dialogs
reoverlay setup
React overlay provider
reoverlay modal container
React modal forms
reoverlay hooks
React modal state management
reoverlay getting started

Getting Started with React Modal: Building Your First Modal Dialog

Oliver Reed — Fri, 16 Jan 2026 14:06:50 +0000

React Modal is a simple, accessible modal component library for React that provides essential modal functionality with focus management and accessibility features. It's designed to be easy to use while offering customization options for building modal dialogs in your applications. This guide walks through setting up and creating your first modal dialog using React Modal with React, from installation to a working implementation. This is part 28 of a series on using React Modal 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 Modal using your preferred package manager:

npm install react-modal

Or with yarn:

yarn add react-modal

Or with pnpm:

pnpm add react-modal

After installation, your package.json should include:

{
  "dependencies": {
    "react-modal": "^3.16.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Modal requires minimal setup. You may want to set the app element for accessibility. Add this to your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Modal from 'react-modal';
import App from './App';

// Set the app element for accessibility
Modal.setAppElement('#root');

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

First Example / Basic Usage

Let's create a simple modal component. Create a new file src/SimpleModal.jsx:

// src/SimpleModal.jsx
import React, { useState } from 'react';
import Modal from 'react-modal';

function SimpleModal() {
  const [modalIsOpen, setIsOpen] = useState(false);

  function openModal() {
    setIsOpen(true);
  }

  function closeModal() {
    setIsOpen(false);
  }

  return (
    <div style={{ padding: '20px' }}>
      <button onClick={openModal}>Open Modal</button>
      <Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
        contentLabel="Example Modal"
      >
        <h2>Hello, I am a modal!</h2>
        <p>This is the modal content.</p>
        <button onClick={closeModal}>Close</button>
      </Modal>
    </div>
  );
}

export default SimpleModal;

Now, update your App.jsx to use the modal:

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

function App() {
  return (
    <div className="App">
      <h1>React Modal Example</h1>
      <SimpleModal />
    </div>
  );
}

export default App;

This creates a basic modal that opens when you click the button and closes when you click the close button or press Escape.

Understanding the Basics

React Modal uses a simple API where:

isOpen: Boolean that controls whether the modal is visible
onRequestClose: Callback function called when the modal should close
contentLabel: Accessible label for the modal (required for accessibility)
children: Content to display inside the modal

Key concepts:

State Management: Use useState to control modal visibility
onRequestClose: Called when user clicks overlay or presses Escape
contentLabel: Required for screen readers
Styling: Can be customized with style and className props

Here's an example with custom styling:

// src/StyledModal.jsx
import React, { useState } from 'react';
import Modal from 'react-modal';

function StyledModal() {
  const [modalIsOpen, setIsOpen] = useState(false);

  const customStyles = {
    content: {
      top: '50%',
      left: '50%',
      right: 'auto',
      bottom: 'auto',
      marginRight: '-50%',
      transform: 'translate(-50%, -50%)',
      maxWidth: '500px',
      width: '90%',
      padding: '20px',
      borderRadius: '8px',
      border: 'none',
      boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
    },
    overlay: {
      backgroundColor: 'rgba(0, 0, 0, 0.5)'
    }
  };

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Styled Modal</button>
      <Modal
        isOpen={modalIsOpen}
        onRequestClose={() => setIsOpen(false)}
        style={customStyles}
        contentLabel="Styled Modal Example"
      >
        <h2 style={{ marginTop: 0 }}>Styled Modal</h2>
        <p>This modal has custom styling.</p>
        <button onClick={() => setIsOpen(false)}>Close</button>
      </Modal>
    </div>
  );
}

export default StyledModal;

Practical Example / Building Something Real

Let's build a contact form modal with validation:

// src/ContactModal.jsx
import React, { useState } from 'react';
import Modal from 'react-modal';

function ContactModal() {
  const [modalIsOpen, setIsOpen] = useState(false);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  const [errors, setErrors] = useState({});

  const customStyles = {
    content: {
      top: '50%',
      left: '50%',
      right: 'auto',
      bottom: 'auto',
      marginRight: '-50%',
      transform: 'translate(-50%, -50%)',
      maxWidth: '500px',
      width: '90%',
      padding: '24px',
      borderRadius: '8px',
      border: 'none',
      boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
    },
    overlay: {
      backgroundColor: 'rgba(0, 0, 0, 0.5)'
    }
  };

  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);
      setIsOpen(false);
      setFormData({ name: '', email: '', message: '' });
      setErrors({});
    }
  };

  const handleClose = () => {
    setIsOpen(false);
    setFormData({ name: '', email: '', message: '' });
    setErrors({});
  };

  return (
    <div style={{ padding: '20px' }}>
      <button
        onClick={() => setIsOpen(true)}
        style={{
          padding: '10px 20px',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        Contact Us
      </button>

      <Modal
        isOpen={modalIsOpen}
        onRequestClose={handleClose}
        style={customStyles}
        contentLabel="Contact Form Modal"
      >
        <h2 style={{ marginTop: 0 }}>Contact Us</h2>
        <form onSubmit={handleSubmit}>
          <div style={{ marginBottom: '16px' }}>
            <label htmlFor="name" style={{ display: 'block', marginBottom: '4px' }}>
              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'
              }}
            />
            {errors.name && (
              <div style={{ color: '#dc3545', fontSize: '14px', marginTop: '4px' }}>
                {errors.name}
              </div>
            )}
          </div>

          <div style={{ marginBottom: '16px' }}>
            <label htmlFor="email" style={{ display: 'block', marginBottom: '4px' }}>
              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'
              }}
            />
            {errors.email && (
              <div style={{ color: '#dc3545', fontSize: '14px', marginTop: '4px' }}>
                {errors.email}
              </div>
            )}
          </div>

          <div style={{ marginBottom: '16px' }}>
            <label htmlFor="message" style={{ display: 'block', marginBottom: '4px' }}>
              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',
                resize: 'vertical'
              }}
            />
            {errors.message && (
              <div style={{ color: '#dc3545', fontSize: '14px', marginTop: '4px' }}>
                {errors.message}
              </div>
            )}
          </div>

          <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
            <button
              type="button"
              onClick={handleClose}
              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'
              }}
            >
              Submit
            </button>
          </div>
        </form>
      </Modal>
    </div>
  );
}

export default ContactModal;

This example demonstrates:

Form handling with validation
Error display and styling
Custom modal styling
Proper form submission
Modal state management
Accessibility with contentLabel

Common Issues / Troubleshooting

Modal not displaying: Ensure isOpen is set to true and you've called Modal.setAppElement('#root') in your app initialization.
Accessibility warnings: Always provide a contentLabel prop. This is required for screen readers and will show a warning in development if missing.
Modal not closing: Make sure onRequestClose is provided and properly updates the state. The modal closes when clicking the overlay or pressing Escape.
Styling issues: Use the style prop with content and overlay properties to customize appearance. For centered modals, use transform: 'translate(-50%, -50%)' with top and left at 50%.
Body scroll lock: React Modal automatically prevents body scrolling when open. If you need to disable this, use the shouldCloseOnOverlayClick and shouldCloseOnEsc props.

Next Steps

Now that you have a basic understanding of React Modal:

Learn about advanced features like portal rendering and focus management
Explore custom animations and transitions
Implement nested modals
Add accessibility enhancements
Learn about other modal libraries (react-aria-modal, reach-ui)
Check the official repository: https://github.com/reactjs/react-modal
Look for part 29 of this series for more advanced topics

Summary

You've successfully set up React Modal in your React application and created your first modal dialog. The library provides a simple API for building accessible modals with essential features like focus management and keyboard navigation.

SEO Keywords

react-modal
React modal dialog
react-modal tutorial
React modal component
react-modal installation
React accessible modal
react-modal example
React popup modal
react-modal setup
React dialog component
react-modal styling
React modal form
react-modal accessibility
React modal library
react-modal getting started

Advanced Accessible Modal Implementation with React Aria Modal

Oliver Reed — Fri, 16 Jan 2026 14:05:36 +0000

React Aria Modal is a powerful library for creating accessible modal dialogs in React applications. It provides comprehensive ARIA support, focus management, and keyboard navigation out of the box, ensuring your modals are usable by all users including those using assistive technologies. This guide walks through implementing advanced, accessible modal dialogs using React Aria Modal with React, covering focus management, keyboard handling, and accessibility patterns. This is part 27 of a series on using React Aria Modal with React.

Prerequisites

Before you begin, ensure you have:

Node.js version 16.0 or higher
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) with hooks support
Advanced understanding of React hooks, refs, and accessibility concepts
Familiarity with ARIA attributes and accessibility best practices
Knowledge of TypeScript (recommended)

Installation

Install React Aria Modal using your preferred package manager:

npm install react-aria-modal

Or with yarn:

yarn add react-aria-modal

Or with pnpm:

pnpm add react-aria-modal

Your package.json should include:

{
  "dependencies": {
    "react-aria-modal": "^4.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Aria Modal requires minimal setup. No additional configuration is needed beyond installation.

First Example / Basic Usage

Let's create a basic modal component. Create src/Modal.jsx:

// src/Modal.jsx
import React, { useState } from 'react';
import AriaModal from 'react-aria-modal';

function Modal() {
  const [modalActive, setModalActive] = useState(false);

  const activateModal = () => {
    setModalActive(true);
  };

  const deactivateModal = () => {
    setModalActive(false);
  };

  const getApplicationNode = () => {
    return document.getElementById('root');
  };

  return (
    <div style={{ padding: '20px' }}>
      <button onClick={activateModal}>
        Open Modal
      </button>
      {modalActive && (
        <AriaModal
          onExit={deactivateModal}
          getApplicationNode={getApplicationNode}
          underlayStyle={{ paddingTop: '2em' }}
        >
          <div style={{ background: 'white', padding: '20px', borderRadius: '8px' }}>
            <h2>Modal Title</h2>
            <p>This is a basic modal dialog.</p>
            <button onClick={deactivateModal}>
          Close
        </button>
          </div>
        </AriaModal>
      )}
    </div>
  );
}

export default Modal;

Understanding the Basics

React Aria Modal provides accessible modal functionality:

AriaModal: Main component that wraps modal content
onExit: Callback when modal should close
getApplicationNode: Function that returns the application root node
underlayStyle: Styles for the modal backdrop

Key concepts for advanced usage:

Focus Management: Automatically traps and manages focus
ARIA Attributes: Adds proper ARIA attributes for screen readers
Keyboard Navigation: Handles Escape key and focus trapping
Application Node: Used to hide main content from screen readers

Here's an example with custom styling:

// src/StyledModal.jsx
import React, { useState } from 'react';
import AriaModal from 'react-aria-modal';

function StyledModal() {
  const [modalActive, setModalActive] = useState(false);

  const getApplicationNode = () => document.getElementById('root');

  return (
    <div>
      <button onClick={() => setModalActive(true)}>
        Open Styled Modal
      </button>
      {modalActive && (
        <AriaModal
          onExit={() => setModalActive(false)}
          getApplicationNode={getApplicationNode}
          underlayStyle={{
            position: 'fixed',
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            zIndex: 1040,
            backgroundColor: 'rgba(0, 0, 0, 0.5)'
          }}
          underlayClass="modal-underlay"
        >
          <div
            style={{
              position: 'relative',
              backgroundColor: 'white',
              borderRadius: '8px',
              padding: '24px',
              maxWidth: '500px',
              margin: '0 auto',
              boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
            }}
          >
            <h2 style={{ marginTop: 0 }}>Styled Modal</h2>
            <p>This modal has custom styling.</p>
            <button onClick={() => setModalActive(false)}>
              Close
            </button>
          </div>
        </AriaModal>
      )}
    </div>
  );
}

export default StyledModal;

Practical Example / Building Something Real

Let's build a comprehensive modal system with form handling and advanced features:

// src/AdvancedModal.jsx
import React, { useState, useRef, useEffect } from 'react';
import AriaModal from 'react-aria-modal';

interface FormData {
  name: string;
  email: string;
  message: string;
}

function AdvancedModal() {
  const [modalActive, setModalActive] = useState(false);
  const [formData, setFormData] = useState<FormData>({
    name: '',
    email: '',
    message: ''
  });
  const [errors, setErrors] = useState<Partial<FormData>>({});
  const firstInputRef = useRef<HTMLInputElement>(null);

  const getApplicationNode = () => document.getElementById('root');

  useEffect(() => {
    if (modalActive && firstInputRef.current) {
      firstInputRef.current.focus();
    }
  }, [modalActive]);

  const handleInputChange = (field: keyof FormData, value: string) => {
    setFormData(prev => ({ ...prev, [field]: value }));
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: undefined }));
    }
  };

  const validateForm = (): boolean => {
    const newErrors: Partial<FormData> = {};

    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: React.FormEvent) => {
    e.preventDefault();
    if (validateForm()) {
      console.log('Form submitted:', formData);
      setModalActive(false);
      setFormData({ name: '', email: '', message: '' });
    }
  };

  const handleClose = () => {
    setModalActive(false);
    setFormData({ name: '', email: '', message: '' });
    setErrors({});
  };

  return (
    <div style={{ padding: '20px' }}>
      <button
        onClick={() => setModalActive(true)}
        style={{
          padding: '10px 20px',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        Open Contact Modal
      </button>

      {modalActive && (
        <AriaModal
          onExit={handleClose}
          getApplicationNode={getApplicationNode}
          underlayStyle={{
            position: 'fixed',
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            zIndex: 1040,
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}
          focusDialog={true}
          titleId="modal-title"
        >
          <div
            role="dialog"
            aria-labelledby="modal-title"
            aria-modal="true"
            style={{
              position: 'relative',
              backgroundColor: 'white',
              borderRadius: '8px',
              padding: '24px',
              maxWidth: '500px',
              width: '90%',
              maxHeight: '90vh',
              overflow: 'auto',
              boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
            }}
          >
            <h2 id="modal-title" style={{ marginTop: 0 }}>
              Contact Us
            </h2>

            <form onSubmit={handleSubmit}>
              <div style={{ marginBottom: '16px' }}>
                <label htmlFor="name" style={{ display: 'block', marginBottom: '4px' }}>
                  Name *
                </label>
                <input
                  ref={firstInputRef}
                  id="name"
                  type="text"
                  value={formData.name}
                  onChange={(e) => handleInputChange('name', e.target.value)}
                  style={{
                    width: '100%',
                    padding: '8px',
                    border: `1px solid ${errors.name ? '#dc3545' : '#ddd'}`,
                    borderRadius: '4px'
                  }}
                  aria-invalid={!!errors.name}
                  aria-describedby={errors.name ? 'name-error' : undefined}
                />
                {errors.name && (
                  <div id="name-error" style={{ color: '#dc3545', fontSize: '14px', marginTop: '4px' }}>
                    {errors.name}
                  </div>
                )}
              </div>

              <div style={{ marginBottom: '16px' }}>
                <label htmlFor="email" style={{ display: 'block', marginBottom: '4px' }}>
                  Email *
                </label>
                <input
                  id="email"
                  type="email"
                  value={formData.email}
                  onChange={(e) => handleInputChange('email', e.target.value)}
                  style={{
                    width: '100%',
                    padding: '8px',
                    border: `1px solid ${errors.email ? '#dc3545' : '#ddd'}`,
                    borderRadius: '4px'
                  }}
                  aria-invalid={!!errors.email}
                  aria-describedby={errors.email ? 'email-error' : undefined}
                />
                {errors.email && (
                  <div id="email-error" style={{ color: '#dc3545', fontSize: '14px', marginTop: '4px' }}>
                    {errors.email}
                  </div>
                )}
              </div>

              <div style={{ marginBottom: '16px' }}>
                <label htmlFor="message" style={{ display: 'block', marginBottom: '4px' }}>
                  Message *
                </label>
                <textarea
                  id="message"
                  value={formData.message}
                  onChange={(e) => handleInputChange('message', e.target.value)}
                  rows={4}
                  style={{
                    width: '100%',
                    padding: '8px',
                    border: `1px solid ${errors.message ? '#dc3545' : '#ddd'}`,
                    borderRadius: '4px',
                    resize: 'vertical'
                  }}
                  aria-invalid={!!errors.message}
                  aria-describedby={errors.message ? 'message-error' : undefined}
                />
                {errors.message && (
                  <div id="message-error" style={{ color: '#dc3545', fontSize: '14px', marginTop: '4px' }}>
                    {errors.message}
                  </div>
                )}
              </div>

              <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
                <button
                  type="button"
                  onClick={handleClose}
                  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'
                  }}
                >
                  Submit
                </button>
              </div>
            </form>
          </div>
        </AriaModal>
      )}
    </div>
  );
}

export default AdvancedModal;

This advanced example demonstrates:

Form handling with validation
Focus management with refs
Error handling and accessibility
ARIA attributes for screen readers
Keyboard navigation support
Custom styling and layout
Proper modal structure

Common Issues / Troubleshooting

Modal not displaying: Ensure modalActive state is properly managed and the modal is conditionally rendered. Check that getApplicationNode returns a valid DOM element.
Focus not trapped: Verify that focusDialog={true} is set. React Aria Modal automatically handles focus trapping, but this prop ensures proper behavior.
Accessibility issues: Always provide titleId and use aria-labelledby on the modal content. Ensure form inputs have proper labels and error messages are associated with inputs using aria-describedby.
Styling issues: The underlayStyle prop controls the backdrop. For centered modals, use flexbox in underlayStyle with display: 'flex', alignItems: 'center', and justifyContent: 'center'.
Application node errors: Ensure getApplicationNode returns the actual application root element. This is used to hide the main content from screen readers when the modal is open.

Next Steps

Now that you've mastered React Aria Modal:

Explore advanced focus management patterns
Implement nested modals and modal stacking
Add animations and transitions
Learn about other accessibility libraries (react-aria, reach-ui)
Implement modal state management with context
Add analytics and tracking
Check the official repository: https://github.com/davidtheclark/react-aria-modal
Look for part 28 of this series for more advanced topics

Summary

You've learned how to implement advanced, accessible modal dialogs with React Aria Modal, including focus management, keyboard navigation, and proper ARIA attributes. The library provides comprehensive accessibility support out of the box, making it easy to build modals that work for all users.

SEO Keywords

react-aria-modal
React accessible modal
react-aria-modal tutorial
React ARIA modal dialog
react-aria-modal installation
React accessibility modal
react-aria-modal example
React focus management
react-aria-modal setup
React keyboard navigation
react-aria-modal accessibility
React modal component
react-aria-modal ARIA
React accessible dialog
react-aria-modal getting started

Building High-Performance Virtualized Lists with Virtua in React

Oliver Reed — Fri, 16 Jan 2026 14:04:45 +0000

Virtua is a zero-config, fast, and lightweight virtual list and grid component for React that provides efficient rendering of large datasets. It automatically handles virtualization with minimal configuration, making it easy to build performant lists and grids. This guide walks through creating efficient virtualized lists using Virtua with React, covering setup, configuration, and practical implementation patterns. This is part 26 of a series on using Virtua with React.

Prerequisites

Before you begin, ensure you have:

Node.js version 16.0 or higher
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) with hooks support
Basic understanding of React hooks (useState, useMemo)
Familiarity with JavaScript/TypeScript

Installation

Install Virtua using your preferred package manager:

npm install virtua

Or with yarn:

yarn add virtua

Or with pnpm:

pnpm add virtua

Your package.json should include:

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

Project Setup

Virtua requires minimal setup. No additional configuration is needed beyond installation. For older browsers that don't support ResizeObserver, you may need a polyfill.

First Example / Basic Usage

Let's create a simple virtualized list component. Create src/VirtualizedList.jsx:

// src/VirtualizedList.jsx
import React from 'react';
import { VList } from 'virtua';

function VirtualizedList() {
  // Generate a large array of items
  const items = Array.from({ length: 10000 }, (_, i) => ({
    id: i + 1,
    name: `Item ${i + 1}`,
    description: `This is item number ${i + 1}`
  }));

  return (
    <div style={{ padding: '20px' }}>
      <h2>Virtualized List (10,000 items)</h2>
      <VList style={{ height: 600 }}>
        {items.map((item) => (
          <div
            key={item.id}
            style={{
              padding: '16px',
              borderBottom: '1px solid #eee',
              height: '60px',
              display: 'flex',
              alignItems: 'center'
            }}
          >
            <div>
              <strong>{item.name}</strong>
              <div style={{ fontSize: '14px', color: '#666' }}>
                {item.description}
              </div>
            </div>
          </div>
        ))}
      </VList>
    </div>
  );
}

export default VirtualizedList;

Update your App.jsx:

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

function App() {
  return (
    <div className="App">
      <h1>Virtua Example</h1>
      <VirtualizedList />
    </div>
  );
}

export default App;

This creates a virtualized list that efficiently renders 10,000 items by only displaying what's visible.

Understanding the Basics

Virtua uses a simple, declarative API:

VList: Component for vertical lists
HList: Component for horizontal lists
Virtualizer: Lower-level component for custom scroll containers
WindowVirtualizer: For window-based scrolling

Key concepts:

Zero Config: Works out of the box with minimal setup
Automatic Virtualization: Handles virtualization automatically
Dynamic Heights: Supports variable item heights without configuration
Render Props: Can use render props for more control

Here's an example with render props:

// src/RenderPropsList.jsx
import React from 'react';
import { VList } from 'virtua';

function RenderPropsList() {
  const items = Array.from({ length: 1000 }, (_, i) => ({
    id: i + 1,
    name: `Item ${i + 1}`,
    height: 50 + (i % 5) * 10 // Variable heights
  }));

  return (
    <VList style={{ height: 600 }}>
      {(item, index) => (
        <div
          key={item.id}
          style={{
            height: item.height,
            padding: '16px',
            borderBottom: '1px solid #eee',
            backgroundColor: index % 2 === 0 ? '#f9f9f9' : 'white'
          }}
        >
          <strong>{item.name}</strong>
        </div>
      )}
    </VList>
  );
}

export default RenderPropsList;

Practical Example / Building Something Real

Let's build a comprehensive data table with virtualization:

// src/VirtualizedDataTable.jsx
import React, { useState, useMemo } from 'react';
import { VList } from 'virtua';

interface Employee {
  id: number;
  name: string;
  email: string;
  department: string;
  salary: number;
  status: string;
}

function VirtualizedDataTable() {
  const [data] = useState<Employee[]>(() => {
    return Array.from({ length: 5000 }, (_, i) => ({
      id: i + 1,
      name: `Employee ${i + 1}`,
      email: `employee${i + 1}@example.com`,
      department: ['Engineering', 'Marketing', 'Sales', 'HR'][i % 4],
      salary: 50000 + Math.random() * 100000,
      status: i % 3 === 0 ? 'Active' : 'Inactive'
    }));
  });

  const renderHeader = () => (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: '80px 200px 250px 150px 120px 120px',
        padding: '12px',
        backgroundColor: '#f5f5f5',
        borderBottom: '2px solid #ddd',
        fontWeight: 'bold',
        position: 'sticky',
        top: 0,
        zIndex: 1
      }}
    >
      <div>ID</div>
      <div>Name</div>
      <div>Department</div>
      <div>Salary</div>
      <div>Status</div>
      <div>Actions</div>
    </div>
  );

  const renderRow = (item: Employee, index: number) => (
    <div
      key={item.id}
      style={{
        display: 'grid',
        gridTemplateColumns: '80px 200px 250px 150px 120px 120px',
        padding: '12px',
        borderBottom: '1px solid #eee',
        backgroundColor: index % 2 === 0 ? '#f9f9f9' : 'white',
        alignItems: 'center',
        minHeight: '60px'
      }}
    >
      <div>{item.id}</div>
      <div>
        <strong>{item.name}</strong>
        <div style={{ fontSize: '12px', color: '#666' }}>{item.email}</div>
      </div>
      <div>
        <span style={{
          padding: '4px 8px',
          borderRadius: '4px',
          backgroundColor: '#007bff',
          color: 'white',
          fontSize: '12px'
        }}>
          {item.department}
        </span>
      </div>
      <div>${item.salary.toLocaleString()}</div>
      <div>
        <span style={{
          padding: '4px 8px',
          borderRadius: '4px',
          backgroundColor: item.status === 'Active' ? '#d4edda' : '#f8d7da',
          color: item.status === 'Active' ? '#155724' : '#721c24',
          fontSize: '12px',
          fontWeight: 'bold'
        }}>
          {item.status}
        </span>
      </div>
      <div>
        <button
          onClick={() => console.log('Edit', item)}
          style={{
            padding: '4px 8px',
            border: '1px solid #007bff',
            backgroundColor: 'white',
            color: '#007bff',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Edit
        </button>
      </div>
    </div>
  );

  return (
    <div style={{ padding: '20px' }}>
      <h2>Virtualized Data Table (5,000 items)</h2>
      <div style={{ border: '1px solid #ddd', borderRadius: '4px' }}>
        {renderHeader()}
        <VList style={{ height: 600 }}>
          {data.map((item, index) => renderRow(item, index))}
        </VList>
      </div>
    </div>
  );
}

export default VirtualizedDataTable;

Here's an example using Virtualizer for custom scroll containers:

// src/CustomScrollList.jsx
import React from 'react';
import { Virtualizer } from 'virtua';

function CustomScrollList() {
  const items = Array.from({ length: 10000 }, (_, i) => ({
    id: i + 1,
    name: `Item ${i + 1}`,
    height: 50 + (i % 3) * 20
  }));

  return (
    <div
      style={{
        height: '600px',
        overflowY: 'auto',
        overflowAnchor: 'none',
        border: '1px solid #ddd',
        borderRadius: '4px'
      }}
    >
      <div style={{ padding: '20px', backgroundColor: '#f5f5f5' }}>
        <h3>Custom Scroll Container</h3>
      </div>
      <Virtualizer startMargin={80}>
        {items.map((item) => (
          <div
            key={item.id}
            style={{
              height: item.height,
              padding: '16px',
              borderBottom: '1px solid #eee'
            }}
          >
            {item.name}
          </div>
        ))}
      </Virtualizer>
    </div>
  );
}

export default CustomScrollList;

This example demonstrates:

Virtualized list rendering for large datasets
Grid layout for table-like appearance
Custom scroll containers with Virtualizer
Sticky headers
Variable item heights
Performance optimization for thousands of items

Common Issues / Troubleshooting

List not rendering: Ensure the container has a fixed height style. VList requires an explicit height to calculate the viewport.
Items not displaying: Verify that you're providing items correctly. For render props, ensure the function signature matches (item, index) => ReactElement.
Scroll issues: When using Virtualizer in a custom scroll container, set overflowAnchor: 'none' on the container to prevent scroll anchoring issues.
Performance issues: Virtua handles performance automatically, but ensure you're not recreating the items array on every render. Use useMemo or useState for stable references.
ResizeObserver errors: For older browsers, you may need to install a ResizeObserver polyfill: npm install resize-observer-polyfill

Next Steps

Now that you understand Virtua:

Explore HList for horizontal lists
Learn about WindowVirtualizer for window-based scrolling
Implement infinite scrolling patterns
Add item selection and interaction handling
Explore grid virtualization
Learn about performance optimization techniques
Check the official repository: https://github.com/inokawa/virtua
Look for part 27 of this series for more advanced topics

Summary

You've learned how to set up Virtua and create efficient virtualized lists with minimal configuration. The library provides excellent performance for rendering large datasets with a simple, zero-config API, making it perfect for building data-intensive applications.

SEO Keywords

virtua React
virtua virtualization
virtua tutorial
React virtualized list virtua
virtua installation
React performance optimization
virtua example
React list component
virtua setup
React scroll performance
virtua VList
React virtual list
virtua Virtualizer
React large list rendering
virtua getting started

Getting Started with React Window: Building Efficient Virtualized Lists

Oliver Reed — Fri, 16 Jan 2026 14:03:23 +0000

React Window is a lightweight library for efficiently rendering large lists and grids in React applications. It uses virtualization to only render the items visible in the viewport, dramatically improving performance for lists with thousands of items. This guide walks through setting up and creating your first virtualized list using React Window with React, from installation to a working implementation. This is part 25 of a series on using React Window 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 Window using your preferred package manager:

npm install react-window

Or with yarn:

yarn add react-window

Or with pnpm:

pnpm add react-window

After installation, your package.json should include:

{
  "dependencies": {
    "react-window": "^1.8.10",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Window requires minimal setup. No additional configuration is needed beyond installation.

First Example / Basic Usage

Let's create a simple virtualized list component. Create a new file src/VirtualizedList.jsx:

// src/VirtualizedList.jsx
import React from 'react';
import { FixedSizeList } from 'react-window';

function VirtualizedList() {
  // Generate a large array of items
  const items = Array.from({ length: 10000 }, (_, i) => ({
    id: i + 1,
    name: `Item ${i + 1}`,
    description: `This is item number ${i + 1}`
  }));

  // Row component that renders each item
  const Row = ({ index, style }) => {
    const item = items[index];
    return (
      <div
        style={{
          ...style,
          padding: '16px',
          borderBottom: '1px solid #eee',
          display: 'flex',
          alignItems: 'center'
        }}
      >
        <div>
          <strong>{item.name}</strong>
          <div style={{ fontSize: '14px', color: '#666' }}>
            {item.description}
          </div>
        </div>
      </div>
    );
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Virtualized List (10,000 items)</h2>
      <FixedSizeList
        height={600}
        itemCount={items.length}
        itemSize={60}
        width="100%"
      >
        {Row}
      </FixedSizeList>
    </div>
  );
}

export default VirtualizedList;

Now, update your App.jsx to use the virtualized list:

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

function App() {
  return (
    <div className="App">
      <h1>React Window Example</h1>
      <VirtualizedList />
    </div>
  );
}

export default App;

This creates a virtualized list that efficiently renders 10,000 items by only displaying what's visible in the viewport.

Understanding the Basics

React Window uses virtualization to render only visible items:

FixedSizeList: Component for lists with fixed item heights
VariableSizeList: Component for lists with variable item heights
height: Height of the visible area in pixels
itemCount: Total number of items in the list
itemSize: Height of each item (for FixedSizeList) or function (for VariableSizeList)
Row: Component that renders each item, receives index and style props

Key concepts:

Virtualization: Only renders visible items, improving performance
Row Component: Function or component that renders each item
Style Prop: Must be applied to the row element for correct positioning
Item Size: Fixed height for FixedSizeList, function for VariableSizeList

Here's a simpler example with just text items:

// src/SimpleList.jsx
import React from 'react';
import { FixedSizeList } from 'react-window';

function SimpleList() {
  const items = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);

  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index]}
    </div>
  );

  return (
    <FixedSizeList
      height={400}
      itemCount={items.length}
      itemSize={50}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  );
}

export default SimpleList;

Practical Example / Building Something Real

Let's build a comprehensive data table with virtualization:

// src/VirtualizedDataTable.jsx
import React, { useState } from 'react';
import { FixedSizeList } from 'react-window';

function VirtualizedDataTable() {
  const [data] = useState(() => {
    return Array.from({ length: 5000 }, (_, i) => ({
      id: i + 1,
      name: `Employee ${i + 1}`,
      email: `employee${i + 1}@example.com`,
      department: ['Engineering', 'Marketing', 'Sales', 'HR'][i % 4],
      salary: 50000 + Math.random() * 100000,
      status: i % 3 === 0 ? 'Active' : 'Inactive'
    }));
  });

  const Row = ({ index, style }) => {
    const item = data[index];
    return (
      <div
        style={{
          ...style,
          display: 'grid',
          gridTemplateColumns: '80px 200px 250px 150px 120px 120px',
          padding: '12px',
          borderBottom: '1px solid #eee',
          backgroundColor: index % 2 === 0 ? '#f9f9f9' : 'white',
          alignItems: 'center'
        }}
      >
        <div>{item.id}</div>
        <div>
          <strong>{item.name}</strong>
          <div style={{ fontSize: '12px', color: '#666' }}>{item.email}</div>
        </div>
        <div>
          <span style={{
            padding: '4px 8px',
            borderRadius: '4px',
            backgroundColor: '#007bff',
            color: 'white',
            fontSize: '12px'
          }}>
            {item.department}
          </span>
        </div>
        <div>${item.salary.toLocaleString()}</div>
        <div>
          <span style={{
            padding: '4px 8px',
            borderRadius: '4px',
            backgroundColor: item.status === 'Active' ? '#d4edda' : '#f8d7da',
            color: item.status === 'Active' ? '#155724' : '#721c24',
            fontSize: '12px',
            fontWeight: 'bold'
          }}>
            {item.status}
          </span>
        </div>
        <div>
          <button
            onClick={() => console.log('Edit', item)}
            style={{
              padding: '4px 8px',
              border: '1px solid #007bff',
              backgroundColor: 'white',
              color: '#007bff',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            Edit
          </button>
        </div>
      </div>
    );
  };

  const Header = () => (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: '80px 200px 250px 150px 120px 120px',
        padding: '12px',
        backgroundColor: '#f5f5f5',
        borderBottom: '2px solid #ddd',
        fontWeight: 'bold',
        position: 'sticky',
        top: 0,
        zIndex: 1
      }}
    >
      <div>ID</div>
      <div>Name</div>
      <div>Department</div>
      <div>Salary</div>
      <div>Status</div>
      <div>Actions</div>
    </div>
  );

  return (
    <div style={{ padding: '20px' }}>
      <h2>Virtualized Data Table (5,000 items)</h2>
      <div style={{ border: '1px solid #ddd', borderRadius: '4px' }}>
        <Header />
        <FixedSizeList
          height={600}
          itemCount={data.length}
          itemSize={60}
          width="100%"
        >
          {Row}
        </FixedSizeList>
      </div>
    </div>
  );
}

export default VirtualizedDataTable;

This example demonstrates:

Virtualized list rendering for large datasets
Grid layout for table-like appearance
Custom row rendering with styling
Sticky header for table structure
Performance optimization for thousands of items
Interactive elements (buttons) in virtualized rows

Common Issues / Troubleshooting

List not rendering: Ensure the container has a fixed height prop. React Window requires an explicit height to calculate the viewport.
Items not displaying correctly: Make sure you're applying the style prop to the row element. This prop contains positioning information that's essential for virtualization.
Performance issues: Use FixedSizeList when all items have the same height, as it's more performant than VariableSizeList. For variable heights, ensure your itemSize function is optimized.
Scroll position lost: React Window maintains scroll position automatically. If you're updating data, ensure you're not recreating the entire data array on every render.
TypeScript errors: React Window includes TypeScript types. Ensure your Row component props match the expected types.

Next Steps

Now that you have a basic understanding of React Window:

Learn about VariableSizeList for dynamic item heights
Explore Grid component for two-dimensional data
Implement infinite scrolling with react-window-infinite-loader
Add item selection and interaction handling
Learn about performance optimization techniques
Check the official documentation: https://react-window.now.sh/
Look for part 26 of this series for more advanced topics

Summary

You've successfully set up React Window in your React application and created your first virtualized list. The library provides excellent performance for rendering large datasets by only rendering visible items, making it perfect for building data-intensive applications.

SEO Keywords

react-window
React window virtualization
react-window tutorial
React virtualized list
react-window installation
React performance optimization
react-window example
React large list rendering
react-window setup
React scroll performance
react-window FixedSizeList
React list component
react-window VariableSizeList
React infinite scroll
react-window getting started

Advanced List Virtualization with React List

Oliver Reed — Fri, 16 Jan 2026 14:02:41 +0000

React List is a powerful library for rendering large lists efficiently in React applications using virtualization. It only renders the items visible in the viewport, dramatically improving performance for lists with thousands or millions of items. This guide walks through implementing advanced list virtualization using React List with React, covering dynamic item heights, infinite scrolling, and performance optimization patterns. This is part 24 of a series on using React List with React.

Prerequisites

Before you begin, ensure you have:

Node.js version 16.0 or higher
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) with hooks support
Advanced understanding of React hooks, refs, and performance optimization
Familiarity with virtualization concepts
Knowledge of TypeScript (recommended)

Installation

Install React List using your preferred package manager:

npm install react-list

Or with yarn:

yarn add react-list

Or with pnpm:

pnpm add react-list

Your package.json should include:

{
  "dependencies": {
    "react-list": "^0.8.13",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React List requires minimal setup. No additional configuration is needed beyond installation.

First Example / Basic Usage

Let's create a basic virtualized list component. Create src/VirtualizedList.jsx:

// src/VirtualizedList.jsx
import React, { useState } from 'react';
import ReactList from 'react-list';

function VirtualizedList() {
  const [items] = useState(() => {
    // Generate a large array of items
    return Array.from({ length: 10000 }, (_, i) => ({
      id: i + 1,
      name: `Item ${i + 1}`,
      description: `This is item number ${i + 1}`
    }));
  });

  const renderItem = (index, key) => {
    const item = items[index];
    return (
      <div
        key={key}
        style={{
          padding: '16px',
          borderBottom: '1px solid #eee',
          height: '60px',
          display: 'flex',
          alignItems: 'center'
        }}
      >
        <div>
          <strong>{item.name}</strong>
          <div style={{ fontSize: '14px', color: '#666' }}>
            {item.description}
          </div>
        </div>
      </div>
    );
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Virtualized List (10,000 items)</h2>
      <div style={{ height: '600px', overflow: 'auto', border: '1px solid #ddd' }}>
        <ReactList
          itemRenderer={renderItem}
          length={items.length}
          type="uniform"
        />
      </div>
    </div>
  );
}

export default VirtualizedList;

Understanding the Basics

React List uses virtualization to render only visible items:

ReactList: Main component that handles virtualization
itemRenderer: Function that renders each item
length: Total number of items in the list
type: Rendering type ('uniform', 'variable', 'simple')

Key concepts for advanced usage:

Virtualization: Only renders visible items, improving performance
Item Renderer: Function that receives index and key, returns React element
Types: 'uniform' for fixed heights, 'variable' for dynamic heights, 'simple' for basic lists
Scroll Container: Must have fixed height and overflow

Here's an example with variable item heights:

// src/VariableHeightList.jsx
import React, { useState } from 'react';
import ReactList from 'react-list';

function VariableHeightList() {
  const [items] = useState(() => {
    return Array.from({ length: 1000 }, (_, i) => ({
      id: i + 1,
      title: `Item ${i + 1}`,
      content: `Content for item ${i + 1}. `.repeat(Math.floor(Math.random() * 5) + 1)
    }));
  });

  const getItemSize = (index) => {
    // Calculate height based on content length
    const item = items[index];
    const lines = Math.ceil(item.content.length / 50);
    return Math.max(60, lines * 20 + 40);
  };

  const renderItem = (index, key) => {
    const item = items[index];
    return (
      <div
        key={key}
        style={{
          padding: '16px',
          borderBottom: '1px solid #eee',
          backgroundColor: index % 2 === 0 ? '#f9f9f9' : 'white'
        }}
      >
        <h3 style={{ margin: '0 0 8px 0' }}>{item.title}</h3>
        <p style={{ margin: 0, color: '#666' }}>{item.content}</p>
      </div>
    );
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Variable Height List</h2>
      <div style={{ height: '600px', overflow: 'auto', border: '1px solid #ddd' }}>
        <ReactList
          itemRenderer={renderItem}
          length={items.length}
          type="variable"
          itemSizeGetter={getItemSize}
        />
      </div>
    </div>
  );
}

export default VariableHeightList;

Practical Example / Building Something Real

Let's build a comprehensive data table with virtualization and infinite scrolling:

// src/VirtualizedDataTable.jsx
import React, { useState, useEffect, useRef, useCallback } from 'react';
import ReactList from 'react-list';

interface DataItem {
  id: number;
  name: string;
  email: string;
  department: string;
  salary: number;
  status: string;
}

function VirtualizedDataTable() {
  const [data, setData] = useState<DataItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const listRef = useRef<ReactList>(null);

  // Generate initial data
  useEffect(() => {
    const initialData = Array.from({ length: 100 }, (_, i) => ({
      id: i + 1,
      name: `Employee ${i + 1}`,
      email: `employee${i + 1}@example.com`,
      department: ['Engineering', 'Marketing', 'Sales', 'HR'][i % 4],
      salary: 50000 + Math.random() * 100000,
      status: i % 3 === 0 ? 'Active' : 'Inactive'
    }));
    setData(initialData);
  }, []);

  const loadMore = useCallback(async () => {
    if (loading || !hasMore) return;

    setLoading(true);
    // Simulate API call
    setTimeout(() => {
      const newData = Array.from({ length: 50 }, (_, i) => ({
        id: data.length + i + 1,
        name: `Employee ${data.length + i + 1}`,
        email: `employee${data.length + i + 1}@example.com`,
        department: ['Engineering', 'Marketing', 'Sales', 'HR'][(data.length + i) % 4],
        salary: 50000 + Math.random() * 100000,
        status: (data.length + i) % 3 === 0 ? 'Active' : 'Inactive'
      }));

      setData(prev => [...prev, ...newData]);
      setLoading(false);

      if (data.length + newData.length >= 1000) {
        setHasMore(false);
      }
    }, 500);
  }, [data.length, loading, hasMore]);

  const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
    const target = e.currentTarget;
    const scrollBottom = target.scrollHeight - target.scrollTop - target.clientHeight;

    if (scrollBottom < 100 && hasMore && !loading) {
      loadMore();
    }
  }, [hasMore, loading, loadMore]);

  const renderItem = useCallback((index: number, key: string | number) => {
    const item = data[index];
    if (!item) return null;

    return (
      <div
        key={key}
        style={{
          display: 'grid',
          gridTemplateColumns: '80px 200px 250px 150px 120px 120px',
          padding: '12px',
          borderBottom: '1px solid #eee',
          backgroundColor: index % 2 === 0 ? '#f9f9f9' : 'white',
          alignItems: 'center'
        }}
      >
        <div>{item.id}</div>
        <div>
          <strong>{item.name}</strong>
          <div style={{ fontSize: '12px', color: '#666' }}>{item.email}</div>
        </div>
        <div>
          <span style={{
            padding: '4px 8px',
            borderRadius: '4px',
            backgroundColor: '#007bff',
            color: 'white',
            fontSize: '12px'
          }}>
            {item.department}
          </span>
        </div>
        <div>${item.salary.toLocaleString()}</div>
        <div>
          <span style={{
            padding: '4px 8px',
            borderRadius: '4px',
            backgroundColor: item.status === 'Active' ? '#d4edda' : '#f8d7da',
            color: item.status === 'Active' ? '#155724' : '#721c24',
            fontSize: '12px',
            fontWeight: 'bold'
          }}>
            {item.status}
          </span>
        </div>
        <div>
          <button
            onClick={() => console.log('Edit', item)}
            style={{
              padding: '4px 8px',
              marginRight: '4px',
              border: '1px solid #007bff',
              backgroundColor: 'white',
              color: '#007bff',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            Edit
          </button>
        </div>
      </div>
    );
  }, [data]);

  const renderHeader = () => (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: '80px 200px 250px 150px 120px 120px',
        padding: '12px',
        backgroundColor: '#f5f5f5',
        borderBottom: '2px solid #ddd',
        fontWeight: 'bold',
        position: 'sticky',
        top: 0,
        zIndex: 1
      }}
    >
      <div>ID</div>
      <div>Name</div>
      <div>Department</div>
      <div>Salary</div>
      <div>Status</div>
      <div>Actions</div>
    </div>
  );

  return (
    <div style={{ padding: '20px' }}>
      <h2>Virtualized Data Table</h2>
      <div style={{ marginBottom: '8px', color: '#666' }}>
        Showing {data.length} items {hasMore ? '(scroll to load more)' : '(all loaded)'}
      </div>
      <div
        style={{
          height: '600px',
          overflow: 'auto',
          border: '1px solid #ddd',
          borderRadius: '4px'
        }}
        onScroll={handleScroll}
      >
        {renderHeader()}
        <ReactList
          ref={listRef}
          itemRenderer={renderItem}
          length={data.length}
          type="uniform"
          minSize={60}
        />
        {loading && (
          <div style={{ padding: '20px', textAlign: 'center' }}>
            Loading more items...
          </div>
        )}
        {!hasMore && (
          <div style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
            No more items to load
          </div>
        )}
      </div>
    </div>
  );
}

export default VirtualizedDataTable;

This advanced example demonstrates:

Virtualized list rendering for large datasets
Infinite scrolling with load more functionality
Variable item rendering with custom layouts
Sticky header for table-like structure
Loading states and end-of-list indicators
Performance optimization for thousands of items
Grid layout for table-like appearance

Common Issues / Troubleshooting

List not rendering: Ensure the container has a fixed height and overflow: auto or overflow: scroll. React List requires a scrollable container.
Items not displaying correctly: Verify that itemRenderer function returns a valid React element with the provided key. The function should accept (index, key) parameters.
Performance issues: Use type="uniform" for fixed-height items when possible, as it's more performant than type="variable". For variable heights, ensure itemSizeGetter is optimized.
Scroll position lost: React List maintains scroll position, but if you're updating data, ensure you're not recreating the entire data array on every render. Use stable references.
Variable height calculation: For type="variable", the itemSizeGetter function must return accurate heights. Incorrect heights can cause rendering issues.

Next Steps

Now that you've mastered React List:

Explore advanced features like horizontal scrolling and grid layouts
Implement custom scroll behaviors and animations
Add item selection and interaction handling
Learn about other virtualization libraries (react-window, react-virtualized)
Optimize for different screen sizes and orientations
Add accessibility features
Check the official repository: https://github.com/orgsync/react-list
Look for part 25 of this series for more advanced topics

Summary

You've learned how to implement advanced list virtualization with React List to handle large datasets efficiently. The library provides excellent performance for rendering thousands of items by only rendering what's visible, making it perfect for building data-intensive applications.

SEO Keywords

react-list
React list virtualization
react-list tutorial
React virtualized list
react-list installation
React performance optimization
react-list example
React infinite scroll
react-list setup
React large list rendering
react-list variable height
React scroll performance
react-list advanced
React list component
react-list getting started

Optimizing Performance with React LazyLoad: Implementing Lazy Loading

Oliver Reed — Fri, 16 Jan 2026 14:01:26 +0000

React LazyLoad is a lightweight library for implementing lazy loading of components and images in React applications. It helps improve initial page load performance by deferring the loading of content until it's needed or about to enter the viewport. This guide walks through implementing lazy loading using React LazyLoad with React, covering image lazy loading, component lazy loading, and performance optimization patterns. This is part 23 of a series on using React LazyLoad with React.

Prerequisites

Before you begin, ensure you have:

Node.js version 14.0 or higher
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) with hooks support
Basic understanding of React hooks (useState, useEffect)
Familiarity with JavaScript/TypeScript

Installation

Install React LazyLoad using your preferred package manager:

npm install react-lazyload

Or with yarn:

yarn add react-lazyload

Or with pnpm:

pnpm add react-lazyload

Your package.json should include:

{
  "dependencies": {
    "react-lazyload": "^3.2.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React LazyLoad requires minimal setup. No additional configuration is needed beyond installation.

First Example / Basic Usage

Let's create a simple lazy-loaded image component. Create src/LazyImage.jsx:

// src/LazyImage.jsx
import React from 'react';
import LazyLoad from 'react-lazyload';

function LazyImage({ src, alt, height = 200 }) {
  return (
    <LazyLoad height={height} offset={100}>
      <img 
        src={src} 
        alt={alt}
        style={{ width: '100%', height: 'auto' }}
      />
    </LazyLoad>
  );
}

export default LazyImage;

Now, use it in your app:

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

function App() {
  return (
    <div className="App">
      <h1>Lazy Loaded Images</h1>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
        <LazyImage 
          src="https://picsum.photos/800/600?random=1" 
          alt="Image 1"
          height={600}
        />
        <LazyImage 
          src="https://picsum.photos/800/600?random=2" 
          alt="Image 2"
          height={600}
        />
        <LazyImage 
          src="https://picsum.photos/800/600?random=3" 
          alt="Image 3"
          height={600}
        />
      </div>
    </div>
  );
}

export default App;

This creates lazy-loaded images that only load when they're about to enter the viewport.

Understanding the Basics

React LazyLoad uses Intersection Observer API to detect when elements enter the viewport:

LazyLoad: Wrapper component that enables lazy loading
height: Expected height of the content (helps prevent layout shift)
offset: Distance from viewport to start loading (in pixels)
placeholder: Content to show while loading

Key concepts:

Viewport Detection: Uses Intersection Observer to detect when elements are visible
Offset: Controls when loading starts (before element enters viewport)
Placeholder: Shows content while the actual content is loading
Height: Prevents layout shift by reserving space

Here's an example with a placeholder:

// src/LazyImageWithPlaceholder.jsx
import React from 'react';
import LazyLoad from 'react-lazyload';

function LazyImageWithPlaceholder({ src, alt }) {
  const placeholder = (
    <div 
      style={{
        height: '400px',
        backgroundColor: '#f0f0f0',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      }}
    >
      Loading...
    </div>
  );

  return (
    <LazyLoad 
      height={400} 
      offset={200}
      placeholder={placeholder}
    >
      <img 
        src={src} 
        alt={alt}
        style={{ width: '100%', height: 'auto' }}
      />
    </LazyLoad>
  );
}

export default LazyImageWithPlaceholder;

Practical Example / Building Something Real

Let's build a comprehensive image gallery with lazy loading:

// src/ImageGallery.jsx
import React, { useState } from 'react';
import LazyLoad from 'react-lazyload';

function ImageGallery() {
  const [images] = useState([
    { id: 1, url: 'https://picsum.photos/800/600?random=1', title: 'Image 1' },
    { id: 2, url: 'https://picsum.photos/800/600?random=2', title: 'Image 2' },
    { id: 3, url: 'https://picsum.photos/800/600?random=3', title: 'Image 3' },
    { id: 4, url: 'https://picsum.photos/800/600?random=4', title: 'Image 4' },
    { id: 5, url: 'https://picsum.photos/800/600?random=5', title: 'Image 5' },
    { id: 6, url: 'https://picsum.photos/800/600?random=6', title: 'Image 6' },
    { id: 7, url: 'https://picsum.photos/800/600?random=7', title: 'Image 7' },
    { id: 8, url: 'https://picsum.photos/800/600?random=8', title: 'Image 8' },
    { id: 9, url: 'https://picsum.photos/800/600?random=9', title: 'Image 9' },
    { id: 10, url: 'https://picsum.photos/800/600?random=10', title: 'Image 10' }
  ]);

  const placeholder = (
    <div 
      style={{
        width: '100%',
        height: '400px',
        backgroundColor: '#e0e0e0',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: '8px'
      }}
    >
      <div style={{ color: '#999' }}>Loading image...</div>
    </div>
  );

  return (
    <div style={{ padding: '20px' }}>
      <h2>Image Gallery</h2>
      <div 
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
          gap: '20px'
        }}
      >
        {images.map((image) => (
          <LazyLoad
            key={image.id}
            height={400}
            offset={100}
            placeholder={placeholder}
            once={true}
          >
            <div
              style={{
                borderRadius: '8px',
                overflow: 'hidden',
                boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
              }}
            >
              <img
                src={image.url}
                alt={image.title}
                style={{
                  width: '100%',
                  height: '400px',
                  objectFit: 'cover',
                  display: 'block'
                }}
                onLoad={() => console.log(`Image ${image.id} loaded`)}
              />
              <div style={{ padding: '12px', backgroundColor: 'white' }}>
                <h3 style={{ margin: 0 }}>{image.title}</h3>
              </div>
            </div>
          </LazyLoad>
        ))}
      </div>
    </div>
  );
}

export default ImageGallery;

Here's an example with lazy-loaded components:

// src/LazyComponentExample.jsx
import React, { Suspense, lazy } from 'react';
import LazyLoad from 'react-lazyload';

// Lazy load a heavy component
const HeavyComponent = lazy(() => import('./HeavyComponent'));

function LazyComponentExample() {
  return (
    <div style={{ padding: '20px' }}>
      <h2>Lazy Loaded Components</h2>
      <div style={{ marginBottom: '1000px' }}>
        <p>Scroll down to see the lazy-loaded component...</p>
      </div>

      <LazyLoad height={400} offset={200}>
        <Suspense fallback={<div>Loading component...</div>}>
          <HeavyComponent />
        </Suspense>
      </LazyLoad>
    </div>
  );
}

export default LazyComponentExample;

This example demonstrates:

Image lazy loading with placeholders
Grid layout for image gallery
Loading callbacks
Component lazy loading with React.lazy
Offset configuration for better UX
Once prop to prevent re-loading

Common Issues / Troubleshooting

Images not loading: Ensure you've set the height prop correctly. Without it, LazyLoad may not detect when to load content. Also check that your images have valid URLs.
Layout shift: Always provide the height prop to reserve space for content. This prevents the page from jumping when content loads.
Content loading too early/late: Adjust the offset prop. A larger offset loads content earlier, while a smaller offset loads it later.
Performance issues: Use the once prop to prevent re-loading content that has already been loaded. This is especially useful for scrollable lists.
Intersection Observer not supported: React LazyLoad falls back to scroll events in older browsers. Ensure your target browsers support Intersection Observer or the fallback behavior.

Next Steps

Now that you understand React LazyLoad:

Explore advanced features like debounce and throttle
Implement lazy loading for different content types (videos, iframes)
Learn about performance monitoring and optimization
Add loading states and error handling
Explore intersection observer API directly
Check the official repository: https://github.com/jasonslyvia/react-lazyload
Look for part 24 of this series for more advanced topics

Summary

You've learned how to implement lazy loading with React LazyLoad to improve your application's performance. The library provides a simple API for deferring content loading until it's needed, helping reduce initial page load times and improve user experience.

SEO Keywords

react-lazyload
React lazy loading
react-lazyload tutorial
React image lazy load
react-lazyload installation
React performance optimization
react-lazyload example
React lazy load component
react-lazyload setup
React viewport detection
react-lazyload images
React intersection observer
react-lazyload performance
React lazy loading images
react-lazyload getting started

Getting Started with AG Grid in React: Building Your First Data Table

Oliver Reed — Fri, 16 Jan 2026 14:00:35 +0000

AG Grid is a powerful, feature-rich data grid library for React that provides Excel-like functionality including sorting, filtering, pagination, and cell editing. It's designed to handle large datasets efficiently while maintaining excellent performance through virtualization. This guide walks through setting up and creating your first interactive data table using AG Grid with React, from installation to a working implementation. This is part 22 of a series on using AG Grid 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 AG Grid React package and its community styles:

npm install ag-grid-react ag-grid-community

Or with yarn:

yarn add ag-grid-react ag-grid-community

Or with pnpm:

pnpm add ag-grid-react ag-grid-community

After installation, your package.json should include:

{
  "dependencies": {
    "ag-grid-react": "^31.0.0",
    "ag-grid-community": "^31.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

AG Grid requires CSS styles to be imported. Add the grid styles and a theme to your main application file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';
import App from './App';

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

Available themes include:

ag-theme-quartz (modern, default)
ag-theme-alpine (classic)
ag-theme-balham (dark)

First Example / Basic Usage

Let's create a basic data grid component. Create src/DataGrid.jsx:

// src/DataGrid.jsx
import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

function DataGrid() {
  // Row data - the data to be displayed
  const [rowData] = useState([
    { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
    { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
    { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
    { make: 'BMW', model: '3 Series', price: 41500, electric: false },
    { make: 'Nissan', model: 'Leaf', price: 28140, electric: true }
  ]);

  // Column definitions - defines the columns structure
  const [columnDefs] = useState([
    { field: 'make', sortable: true, filter: true },
    { field: 'model', sortable: true, filter: true },
    { 
      field: 'price', 
      sortable: true, 
      filter: 'agNumberColumnFilter',
      valueFormatter: params => '$' + params.value.toLocaleString()
    },
    { 
      field: 'electric',
      cellRenderer: params => params.value ? '⚡ Yes' : 'No'
    }
  ]);

  // Default column properties applied to all columns
  const defaultColDef = {
    sortable: true,
    filter: true,
    flex: 1,
    resizable: true
  };

  return (
    <div className="ag-theme-quartz" style={{ height: 500, width: '100%' }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        defaultColDef={defaultColDef}
        pagination={true}
        paginationPageSize={10}
      />
    </div>
  );
}

export default DataGrid;

Update your App.jsx:

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

function App() {
  return (
    <div className="App">
      <h1>AG Grid Data Table</h1>
      <DataGrid />
    </div>
  );
}

export default App;

This creates a fully functional data grid with sorting, filtering, and pagination. Users can click column headers to sort, use the filter icons, and navigate through pages.

Understanding the Basics

AG Grid uses a declarative approach where you define:

rowData: An array of objects representing table rows
columnDefs: An array defining column structure, properties, and behavior
defaultColDef: Default properties applied to all columns

Key concepts:

Field: Maps to a property in your row data object
Cell Renderer: Custom component or function to render cell content
Value Formatter: Formats the displayed value without changing the data
Filters: Built-in filters (text, number, date) or custom filters
Sorting: Enable sorting per column or globally

Here's an example with editable cells and row selection:

// src/EditableGrid.jsx
import React, { useState, useCallback } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

function EditableGrid() {
  const [rowData, setRowData] = useState([
    { id: 1, name: 'John Doe', email: 'john@example.com', age: 28 },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 32 },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', age: 45 }
  ]);

  const [columnDefs] = useState([
    { 
      field: 'id', 
      checkboxSelection: true, 
      headerCheckboxSelection: true,
      width: 100
    },
    { field: 'name', editable: true, sortable: true },
    { field: 'email', editable: true, filter: 'agTextColumnFilter' },
    { 
      field: 'age', 
      editable: true, 
      filter: 'agNumberColumnFilter',
      cellEditor: 'agNumberCellEditor'
    }
  ]);

  const defaultColDef = {
    flex: 1,
    sortable: true,
    filter: true
  };

  const onCellValueChanged = useCallback((event) => {
    console.log('Cell value changed:', event.data);
    // Update your state or sync with backend
    const updatedData = rowData.map(row => 
      row.id === event.data.id ? event.data : row
    );
    setRowData(updatedData);
  }, [rowData]);

  return (
    <div className="ag-theme-quartz" style={{ height: 400, width: '100%' }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        defaultColDef={defaultColDef}
        rowSelection="multiple"
        onCellValueChanged={onCellValueChanged}
        animateRows={true}
      />
    </div>
  );
}

export default EditableGrid;

Practical Example / Building Something Real

Let's build a comprehensive employee management table with advanced features:

// src/EmployeeTable.jsx
import React, { useState, useRef, useCallback } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

function EmployeeTable() {
  const gridRef = useRef();
  const [rowData] = useState([
    { 
      id: 1, 
      name: 'Sarah Johnson', 
      department: 'Engineering', 
      salary: 95000, 
      startDate: '2020-01-15',
      status: 'Active'
    },
    { 
      id: 2, 
      name: 'Michael Chen', 
      department: 'Marketing', 
      salary: 75000, 
      startDate: '2019-06-20',
      status: 'Active'
    },
    { 
      id: 3, 
      name: 'Emily Davis', 
      department: 'Sales', 
      salary: 65000, 
      startDate: '2021-03-10',
      status: 'Active'
    },
    { 
      id: 4, 
      name: 'David Wilson', 
      department: 'Engineering', 
      salary: 110000, 
      startDate: '2018-09-05',
      status: 'Active'
    },
    { 
      id: 5, 
      name: 'Lisa Anderson', 
      department: 'HR', 
      salary: 70000, 
      startDate: '2022-01-08',
      status: 'Active'
    }
  ]);

  const [columnDefs] = useState([
    { 
      field: 'id', 
      headerName: 'ID',
      width: 80,
      checkboxSelection: true,
      headerCheckboxSelection: true
    },
    { 
      field: 'name', 
      headerName: 'Employee Name',
      sortable: true,
      filter: 'agTextColumnFilter',
      editable: true
    },
    { 
      field: 'department', 
      headerName: 'Department',
      sortable: true,
      filter: 'agSetColumnFilter',
      editable: true,
      cellEditor: 'agSelectCellEditor',
      cellEditorParams: {
        values: ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance']
      }
    },
    { 
      field: 'salary', 
      headerName: 'Salary',
      sortable: true,
      filter: 'agNumberColumnFilter',
      editable: true,
      cellEditor: 'agNumberCellEditor',
      valueFormatter: params => '$' + params.value.toLocaleString(),
      cellStyle: params => {
        if (params.value > 100000) {
          return { backgroundColor: '#d4edda' };
        }
        return null;
      }
    },
    { 
      field: 'startDate', 
      headerName: 'Start Date',
      sortable: true,
      filter: 'agDateColumnFilter',
      valueFormatter: params => {
        const date = new Date(params.value);
        return date.toLocaleDateString('en-US');
      }
    },
    { 
      field: 'status', 
      headerName: 'Status',
      sortable: true,
      filter: 'agSetColumnFilter',
      cellRenderer: params => {
        const status = params.value;
        const color = status === 'Active' ? 'green' : 'red';
        return `<span style="color: ${color}; font-weight: bold;">${status}</span>`;
      }
    }
  ]);

  const defaultColDef = {
    flex: 1,
    sortable: true,
    filter: true,
    resizable: true
  };

  const onGridReady = useCallback((params) => {
    console.log('Grid ready with', params.api.getDisplayedRowCount(), 'rows');
    // Auto-size columns to fit content
    params.api.sizeColumnsToFit();
  }, []);

  const onSelectionChanged = useCallback(() => {
    const selectedRows = gridRef.current.api.getSelectedRows();
    console.log('Selected rows:', selectedRows);
  }, []);

  const onExportClick = useCallback(() => {
    gridRef.current.api.exportDataAsCsv({
      fileName: 'employees.csv',
      onlySelected: false
    });
  }, []);

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ marginBottom: '20px' }}>
        <h2>Employee Management Table</h2>
        <button 
          onClick={onExportClick}
          style={{
            padding: '10px 20px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Export to CSV
        </button>
      </div>
      <div 
        className="ag-theme-quartz" 
        style={{ height: 600, width: '100%' }}
      >
        <AgGridReact
          ref={gridRef}
          rowData={rowData}
          columnDefs={columnDefs}
          defaultColDef={defaultColDef}
          rowSelection="multiple"
          pagination={true}
          paginationPageSize={10}
          animateRows={true}
          onGridReady={onGridReady}
          onSelectionChanged={onSelectionChanged}
        />
      </div>
    </div>
  );
}

export default EmployeeTable;

This example demonstrates:

Multi-row selection with checkboxes
Editable cells with validation
Custom cell renderers and formatters
Conditional cell styling
Export functionality
Advanced filtering (text, number, date, set filters)
Event handling for grid interactions

Common Issues / Troubleshooting

Grid not displaying: Ensure you've imported both CSS files (ag-grid.css and a theme CSS). The container div must have an explicit height.
Styling issues: Make sure you're applying the theme class (ag-theme-quartz) to the container div, not just importing the CSS.
Performance with large datasets: For datasets with 1000+ rows, consider enabling virtualization (enabled by default) or using the server-side row model for better performance.
TypeScript errors: If using TypeScript, install @types/react and ensure your column definitions match the ColDef type from ag-grid-community.
Cell editing not working: Verify that editable: true is set in column definitions and that you're handling onCellValueChanged events if needed.

Next Steps

Now that you understand the basics of AG Grid:

Explore advanced features like custom cell renderers, cell editors, and value getters
Learn about server-side row model for handling large datasets
Implement custom filters and sorting logic
Add row grouping and aggregation features
Explore the enterprise features (if using AG Grid Enterprise)
Check the official documentation: https://www.ag-grid.com/react-data-grid/
Look for part 23 of this series for more advanced topics

Summary

You've learned how to set up AG Grid in React and create feature-rich data tables with sorting, filtering, pagination, and editing capabilities. AG Grid provides a robust foundation for building enterprise-grade data management interfaces with excellent performance and extensive customization options.

SEO Keywords

AG Grid React
React data grid
AG Grid tutorial
React table component
AG Grid installation
React data table
AG Grid React example
interactive table React
AG Grid filtering sorting
React grid component
AG Grid pagination
React spreadsheet table
AG Grid cell editing
React data grid library
AG Grid React setup

Advanced Data Table Implementation with Material React Table

Oliver Reed — Fri, 16 Jan 2026 13:59:38 +0000

Material React Table is a powerful, feature-rich data table component built on Material-UI and TanStack Table that provides comprehensive functionality including sorting, filtering, pagination, editing, grouping, and virtualization. It combines the flexibility of TanStack Table with Material-UI's design system, offering extensive customization options for building enterprise-grade data management interfaces. This guide walks through implementing advanced table features using Material React Table with React, covering complex configurations, custom renderers, and enterprise-grade implementations. This is part 21 of a series on using Material React Table with React.

Prerequisites

Before you begin, ensure you have:

Node.js version 16.0 or higher
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) with hooks support
Advanced understanding of React hooks, context API, and state management
Material-UI installed (required dependency)
Familiarity with TypeScript (highly recommended)
Knowledge of TanStack Table concepts (helpful but not required)

Installation

First, install Material-UI core components (required dependency):

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

Then install Material React Table:

npm install material-react-table

Or install everything with yarn:

yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled material-react-table

Or with pnpm:

pnpm add @mui/material @mui/icons-material @emotion/react @emotion/styled material-react-table

Your package.json should include:

{
  "dependencies": {
    "material-react-table": "^2.0.0",
    "@mui/material": "^5.0.0",
    "@mui/icons-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

Material React Table requires Material-UI's theme provider. Set up your app with the Material-UI theme:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import App from './App';

const theme = createTheme();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a basic table component. Create src/DataTable.jsx:

// src/DataTable.jsx
import React, { useMemo } from 'react';
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_ColumnDef,
} from 'material-react-table';

interface Person {
  id: number;
  name: string;
  email: string;
  age: number;
  city: string;
}

function DataTable() {
  const data: Person[] = [
    { id: 1, name: 'John Doe', email: 'john@example.com', age: 28, city: 'New York' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 32, city: 'London' },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', age: 45, city: 'Paris' },
    { id: 4, name: 'Alice Williams', email: 'alice@example.com', age: 29, city: 'Tokyo' }
  ];

  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'id',
        header: 'ID',
        size: 80,
      },
      {
        accessorKey: 'name',
        header: 'Name',
      },
      {
        accessorKey: 'email',
        header: 'Email',
      },
      {
        accessorKey: 'age',
        header: 'Age',
        size: 100,
      },
      {
        accessorKey: 'city',
        header: 'City',
      },
    ],
    []
  );

  const table = useMaterialReactTable({
    columns,
    data,
    enableRowSelection: true,
    enableColumnOrdering: true,
  });

  return <MaterialReactTable table={table} />;
}

export default DataTable;

Understanding the Basics

Material React Table uses TanStack Table under the hood with Material-UI styling:

useMaterialReactTable: Hook that creates table instance with configuration
MaterialReactTable: Component that renders the table
columns: Array of column definitions using accessorKey or accessorFn
data: Array of row data objects (must be stable reference)
MRT_ColumnDef: TypeScript type for column definitions

Key concepts for advanced usage:

Stable References: Data and columns should be memoized or stable to prevent re-renders
Column Definitions: Use accessorKey for simple access or accessorFn for computed values
Table Instance: Returned from useMaterialReactTable, provides methods and state
Feature Flags: Enable/disable features with enable* props

Here's an example with custom cell rendering:

// src/AdvancedTable.jsx
import React, { useMemo } from 'react';
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_ColumnDef,
} from 'material-react-table';
import { Chip, Box } from '@mui/material';

interface Product {
  id: number;
  name: string;
  category: string;
  price: number;
  stock: number;
  status: string;
}

function AdvancedTable() {
  const data: Product[] = [
    { id: 1, name: 'Laptop', category: 'Electronics', price: 999.99, stock: 15, status: 'In Stock' },
    { id: 2, name: 'Mouse', category: 'Electronics', price: 29.99, stock: 8, status: 'Low Stock' },
    { id: 3, name: 'Keyboard', category: 'Electronics', price: 79.99, stock: 12, status: 'In Stock' }
  ];

  const columns = useMemo<MRT_ColumnDef<Product>[]>(
    () => [
      {
        accessorKey: 'id',
        header: 'ID',
        size: 80,
      },
      {
        accessorKey: 'name',
        header: 'Product Name',
      },
      {
        accessorKey: 'category',
        header: 'Category',
        Cell: ({ cell }) => (
          <Chip label={cell.getValue<string>()} size="small" color="primary" />
        ),
      },
      {
        accessorKey: 'price',
        header: 'Price',
        Cell: ({ cell }) => `$${cell.getValue<number>().toFixed(2)}`,
      },
      {
        accessorKey: 'stock',
        header: 'Stock',
        Cell: ({ cell }) => {
          const stock = cell.getValue<number>();
          return (
            <Box
              component="span"
              sx={{
                color: stock < 10 ? 'error.main' : 'success.main',
                fontWeight: 'bold',
              }}
            >
              {stock}
            </Box>
          );
        },
      },
      {
        accessorKey: 'status',
        header: 'Status',
        Cell: ({ cell }) => {
          const status = cell.getValue<string>();
          return (
            <Chip
              label={status}
              size="small"
              color={status === 'In Stock' ? 'success' : 'warning'}
            />
          );
        },
      },
    ],
    []
  );

  const table = useMaterialReactTable({
    columns,
    data,
    enableRowSelection: true,
    enableSorting: true,
    enableFiltering: true,
    enablePagination: true,
  });

  return <MaterialReactTable table={table} />;
}

export default AdvancedTable;

Practical Example / Building Something Real

Let's build a comprehensive admin dashboard with advanced features:

// src/AdminDashboard.jsx
import React, { useMemo, useState, useCallback } from 'react';
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_ColumnDef,
  type MRT_Row,
} from 'material-react-table';
import {
  Box,
  Chip,
  IconButton,
  Tooltip,
  Button,
} from '@mui/material';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import AddIcon from '@mui/icons-material/Add';

interface Employee {
  id: number;
  name: string;
  email: string;
  department: string;
  salary: number;
  startDate: string;
  status: string;
}

function AdminDashboard() {
  const [data, setData] = useState<Employee[]>([
    { 
      id: 1, 
      name: 'Sarah Johnson', 
      email: 'sarah@example.com',
      department: 'Engineering', 
      salary: 95000, 
      startDate: '2020-01-15',
      status: 'Active'
    },
    { 
      id: 2, 
      name: 'Michael Chen', 
      email: 'michael@example.com',
      department: 'Marketing', 
      salary: 75000, 
      startDate: '2019-06-20',
      status: 'Active'
    },
    { 
      id: 3, 
      name: 'Emily Davis', 
      email: 'emily@example.com',
      department: 'Sales', 
      salary: 65000, 
      startDate: '2021-03-10',
      status: 'Active'
    },
    { 
      id: 4, 
      name: 'David Wilson', 
      email: 'david@example.com',
      department: 'Engineering', 
      salary: 110000, 
      startDate: '2018-09-05',
      status: 'Active'
    }
  ]);

  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});

  const columns = useMemo<MRT_ColumnDef<Employee>[]>(
    () => [
      {
        accessorKey: 'id',
        header: 'ID',
        size: 80,
        enableColumnFilter: false,
      },
      {
        accessorKey: 'name',
        header: 'Employee Name',
        Cell: ({ row }) => (
          <Box>
            <Box component="span" sx={{ fontWeight: 'bold' }}>
              {row.original.name}
            </Box>
            <Box component="div" sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>
              {row.original.email}
            </Box>
          </Box>
        ),
      },
      {
        accessorKey: 'department',
        header: 'Department',
        filterVariant: 'select',
        filterSelectOptions: ['Engineering', 'Marketing', 'Sales', 'HR'],
        Cell: ({ cell }) => {
          const dept = cell.getValue<string>();
          const colors: Record<string, 'error' | 'warning' | 'success' | 'info'> = {
            Engineering: 'error',
            Marketing: 'warning',
            Sales: 'success',
            HR: 'info',
          };
          return (
            <Chip
              label={dept}
              size="small"
              color={colors[dept] || 'default'}
            />
          );
        },
      },
      {
        accessorKey: 'salary',
        header: 'Salary',
        filterVariant: 'range',
        Cell: ({ cell, row }) => {
          const salary = cell.getValue<number>();
          return (
            <Box
              sx={{
                fontWeight: salary > 100000 ? 'bold' : 'normal',
                color: salary > 100000 ? 'success.main' : 'inherit',
              }}
            >
              ${salary.toLocaleString()}
            </Box>
          );
        },
      },
      {
        accessorKey: 'startDate',
        header: 'Start Date',
        filterVariant: 'date',
        Cell: ({ cell }) => {
          const date = new Date(cell.getValue<string>());
          return date.toLocaleDateString('en-US');
        },
      },
      {
        accessorKey: 'status',
        header: 'Status',
        filterVariant: 'select',
        filterSelectOptions: ['Active', 'Inactive'],
        Cell: ({ cell }) => {
          const status = cell.getValue<string>();
          return (
            <Chip
              label={status}
              size="small"
              color={status === 'Active' ? 'success' : 'error'}
            />
          );
        },
      },
    ],
    []
  );

  const handleDeleteRow = useCallback(
    (row: MRT_Row<Employee>) => {
      if (window.confirm(`Are you sure you want to delete ${row.original.name}?`)) {
        setData((prev) => prev.filter((item) => item.id !== row.original.id));
      }
    },
    []
  );

  const handleBulkDelete = useCallback(() => {
    const selectedIds = Object.keys(rowSelection).map(Number);
    if (selectedIds.length === 0) return;

    if (window.confirm(`Delete ${selectedIds.length} selected employees?`)) {
      setData((prev) => prev.filter((item) => !selectedIds.includes(item.id)));
      setRowSelection({});
    }
  }, [rowSelection]);

  const table = useMaterialReactTable({
    columns,
    data,
    enableRowSelection: true,
    enableColumnOrdering: true,
    enableGlobalFilter: true,
    enableColumnFilters: true,
    enablePagination: true,
    enableSorting: true,
    enableDensityToggle: false,
    enableFullScreenToggle: true,
    enableStickyHeader: true,
    muiTableContainerProps: { sx: { maxHeight: '600px' } },
    onRowSelectionChange: setRowSelection,
    state: { rowSelection },
    renderTopToolbarCustomActions: ({ table }) => (
      <Box sx={{ display: 'flex', gap: '8px', p: '8px' }}>
        <Button
          color="primary"
          startIcon={<AddIcon />}
          onClick={() => console.log('Add new employee')}
          variant="contained"
        >
          Add Employee
        </Button>
        {Object.keys(rowSelection).length > 0 && (
          <Button
            color="error"
            startIcon={<DeleteIcon />}
            onClick={handleBulkDelete}
            variant="contained"
          >
            Delete Selected ({Object.keys(rowSelection).length})
          </Button>
        )}
      </Box>
    ),
    renderRowActions: ({ row }) => (
      <Box sx={{ display: 'flex', gap: '4px' }}>
        <Tooltip title="Edit">
          <IconButton onClick={() => console.log('Edit', row.original)}>
            <EditIcon />
          </IconButton>
        </Tooltip>
        <Tooltip title="Delete">
          <IconButton color="error" onClick={() => handleDeleteRow(row)}>
            <DeleteIcon />
          </IconButton>
        </Tooltip>
      </Box>
    ),
    initialState: {
      showColumnFilters: true,
      showGlobalFilter: true,
      pagination: { pageSize: 10, pageIndex: 0 },
    },
  });

  return (
    <Box sx={{ p: 3 }}>
      <MaterialReactTable table={table} />
    </Box>
  );
}

export default AdminDashboard;

This advanced example demonstrates:

Row selection with bulk operations
Custom cell rendering with Material-UI components
Advanced filtering (select, range, date filters)
Custom toolbar actions
Row actions (edit, delete)
Conditional styling
Column ordering
Global search
Sticky header
Full screen toggle

Common Issues / Troubleshooting

Table not rendering: Ensure you've wrapped your app with Material-UI's ThemeProvider and imported the necessary CSS. Verify that data and columns are stable references (use useMemo or useState).
Performance issues: Always memoize columns with useMemo and ensure data is a stable reference. Avoid creating new arrays/objects on every render.
TypeScript errors: Material React Table has excellent TypeScript support. Use MRT_ColumnDef<YourType>[] for columns and define your data types properly.
Filtering not working: Enable enableColumnFilters: true and set appropriate filterVariant in column definitions ('text', 'select', 'range', 'date').
Row selection not working: Enable enableRowSelection: true and manage selection state with onRowSelectionChange and state.rowSelection.

Next Steps

Now that you've mastered Material React Table:

Explore advanced features like column virtualization and grouping
Implement custom cell editors and validators
Add server-side data loading and pagination
Learn about column resizing, pinning, and reordering
Explore expandable rows and detail panels
Add export functionality (CSV, Excel, PDF)
Check the official repository: https://github.com/KevinVandy/material-react-table
Look for part 22 of this series for more advanced topics

Summary

You've learned how to implement advanced data table features with Material React Table, including sorting, filtering, pagination, row selection, and custom rendering using Material-UI components. The library provides extensive functionality for building enterprise-grade data management interfaces with excellent performance and extensive customization options.

SEO Keywords

material-react-table
Material React Table tutorial
React data table Material-UI
material-react-table installation
React table component advanced
material-react-table example
React data grid Material-UI
material-react-table setup
React interactive table
Material React Table filtering
React table component
material-react-table pagination
React Material-UI table
Material React Table sorting
React enterprise data table