Registry / web-framework / react-confirm-alert

react-confirm-alert

library3.0.6jsnpmunverified

react-confirm-alert is a React component that provides a customizable confirmation dialog, enabling developers to prompt users for actions like 'Yes/No' or 'Confirm/Cancel'. The current stable version is 3.0.6, which specifically supports React 18. For projects using React 17.x.x or older, version 2.x.x should be used. This library offers a straightforward functional API and also allows for fully custom UI components, providing significant flexibility over native browser `confirm()` dialogs. Its release cadence appears moderate, with several minor updates addressing features and bug fixes within the 2.x.x and 3.x.x series. A key differentiator is its simplicity and built-in styling, coupled with strong customization options for advanced use cases.

web-framework

npm install react-confirm-alert

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-CONFIRM-ALER

react-confirm-alert

web-frameworkjavascriptv3.0.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

confirmAlert

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

✗ const { confirmAlert } = require('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.

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;

Debug

Known issues

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

affects: >=3.0.0

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

affects: >=1.0.0

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

affects: >=1.0.0

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

affects: <3.0.0

Errors

Common errors & fixes

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

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.

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.

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

Upgrade

Version history

3.0.6latest on npm

Audit

Dependencies

reactrequiredCore React library for UI components

react-domrequiredDOM rendering capabilities for React applications

Agent activity

10 hits · last 30 days

node

Resources

githubhttps://github.com/GA-MO/react-confirm-alert ↗

packagehttps://www.npmjs.com/package/react-confirm-alert ↗