React Confirm Alert Dialog

Common errors

• Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

  cause Attempting to use `confirmAlert` without correctly importing it as a named export.
  fix Ensure you are using `import { confirmAlert } from 'react-confirm-alert';` and not `import confirmAlert from 'react-confirm-alert';` or `require` in an ESM context.

• Dialog appears without any styling or looks unformatted.

  cause The required CSS file for `react-confirm-alert` has not been imported or is not being processed by the build system.
  fix Add `import 'react-confirm-alert/src/react-confirm-alert.css';` to your main application file or the component where you use `confirmAlert`. Verify your build tools are correctly configured to handle CSS imports.

• TypeError: Cannot read properties of undefined (reading 'call') or similar React DOM errors when using with React 17 or older.

  cause Using `react-confirm-alert` version 3.x.x (which targets React 18) with an application running React 17 or an older version.
  fix Downgrade `react-confirm-alert` to version 2.x.x by running `npm install react-confirm-alert@^2.0.0 --save`.

Warnings

• breaking Version 3.x.x of react-confirm-alert introduces support for React 18. If your project uses React 17.x.x or older, you must continue using react-confirm-alert version 2.x.x to ensure compatibility.
  Fix: For React 17 or older: `npm install react-confirm-alert@^2.0.0 --save`. For React 18 or newer: `npm install react-confirm-alert@latest --save`.
• gotcha The default styles for react-confirm-alert are not automatically bundled with the component. You must explicitly import the CSS file for the dialog to render with proper styling.
  Fix: Add `import 'react-confirm-alert/src/react-confirm-alert.css';` to your entry file or the component where you use `confirmAlert`.
• gotcha When using `customUI`, it is your responsibility to handle the `onClose` callback provided by the component to ensure the dialog can be dismissed programmatically. Failing to call `onClose()` from your custom buttons will prevent the dialog from closing.
  Fix: Ensure that your custom UI buttons call the `onClose` function passed to your `customUI` render prop, e.g., `<button onClick={onClose}>Close</button>`.
• deprecated Older versions might not have `targetId` or `keyCodeForClose` props. Always consult the documentation corresponding to your installed version, especially when upgrading or downgrading.
  Fix: Upgrade to a newer version (3.x.x) for the latest features like `targetId` and `keyCodeForClose`, or check the specific version's documentation (e.g., v2.x.x documentation) for available props.

Install

• npm install react-confirm-alert npm
• yarn add react-confirm-alert yarn
• pnpm add react-confirm-alert pnpm

Imports

• confirmAlert
  wrong:

  const { confirmAlert } = require('react-confirm-alert');

  correct:

  import { confirmAlert } from 'react-confirm-alert';

  Primary function to invoke the alert. ESM import is standard; CommonJS `require` is not officially supported and may lead to issues with newer versions or bundlers.
• CSS

  import 'react-confirm-alert/src/react-confirm-alert.css';

  The default styles must be imported separately for the dialog to render correctly. Ensure your build system (e.g., Webpack, Vite) is configured to handle CSS imports.
• types

  import type { Options } from 'react-confirm-alert';

  Type definitions for the `Options` object passed to `confirmAlert` are available for TypeScript users, ensuring type safety for your alert configurations.

Quickstart

This quickstart demonstrates how to import and use `confirmAlert` with a basic 'Yes/No' button configuration. It includes the necessary CSS import and shows how to attach the dialog to a button click handler, providing a title, message, and action callbacks.

import React from 'react';
import { confirmAlert } from 'react-confirm-alert'; // Import
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css

const App = () => {
  const handleSubmit = () => {
    confirmAlert({
      title: 'Confirm to submit',
      message: 'Are you sure you want to proceed with this action?',
      buttons: [
        {
          label: 'Yes',
          onClick: () => alert('Action confirmed!')
        },
        {
          label: 'No',
          onClick: () => console.log('Action cancelled.')
        }
      ],
      closeOnEscape: true,
      closeOnClickOutside: true,
      overlayClassName: "custom-overlay"
    });
  };

  return (
    <div className='container' style={{ padding: '20px' }}>
      <h1>React Confirm Alert Demo</h1>
      <button onClick={handleSubmit} style={{ padding: '10px 20px', fontSize: '16px', cursor: 'pointer' }}>
        Show Confirm Dialog
      </button>
      <p>Click the button to open a confirmation dialog.</p>
    </div>
  );
};

export default App;