{"id":11667,"library":"react-confirm-alert","title":"React Confirm Alert Dialog","description":"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.","status":"active","version":"3.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/GA-MO/react-confirm-alert","tags":["javascript","react alert example","redux confirm dialog","confirm alert react js","react-confirm-alert","react-confirm","confirm-dialog","confirm","dialog","typescript"],"install":[{"cmd":"npm install react-confirm-alert","lang":"bash","label":"npm"},{"cmd":"yarn add react-confirm-alert","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-confirm-alert","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library for UI components","package":"react","optional":false},{"reason":"DOM rendering capabilities for React applications","package":"react-dom","optional":false}],"imports":[{"note":"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.","wrong":"const { confirmAlert } = require('react-confirm-alert');","symbol":"confirmAlert","correct":"import { confirmAlert } from 'react-confirm-alert';"},{"note":"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.","symbol":"CSS","correct":"import 'react-confirm-alert/src/react-confirm-alert.css';"},{"note":"Type definitions for the `Options` object passed to `confirmAlert` are available for TypeScript users, ensuring type safety for your alert configurations.","symbol":"types","correct":"import type { Options } from 'react-confirm-alert';"}],"quickstart":{"code":"import React from 'react';\nimport { confirmAlert } from 'react-confirm-alert'; // Import\nimport 'react-confirm-alert/src/react-confirm-alert.css'; // Import css\n\nconst App = () => {\n  const handleSubmit = () => {\n    confirmAlert({\n      title: 'Confirm to submit',\n      message: 'Are you sure you want to proceed with this action?',\n      buttons: [\n        {\n          label: 'Yes',\n          onClick: () => alert('Action confirmed!')\n        },\n        {\n          label: 'No',\n          onClick: () => console.log('Action cancelled.')\n        }\n      ],\n      closeOnEscape: true,\n      closeOnClickOutside: true,\n      overlayClassName: \"custom-overlay\"\n    });\n  };\n\n  return (\n    <div className='container' style={{ padding: '20px' }}>\n      <h1>React Confirm Alert Demo</h1>\n      <button onClick={handleSubmit} style={{ padding: '10px 20px', fontSize: '16px', cursor: 'pointer' }}>\n        Show Confirm Dialog\n      </button>\n      <p>Click the button to open a confirmation dialog.</p>\n    </div>\n  );\n};\n\nexport default App;","lang":"typescript","description":"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."},"warnings":[{"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`.","message":"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.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Add `import 'react-confirm-alert/src/react-confirm-alert.css';` to your entry file or the component where you use `confirmAlert`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure that your custom UI buttons call the `onClose` function passed to your `customUI` render prop, e.g., `<button onClick={onClose}>Close</button>`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"Older versions might not have `targetId` or `keyCodeForClose` props. Always consult the documentation corresponding to your installed version, especially when upgrading or downgrading.","severity":"deprecated","affected_versions":"<3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Attempting to use `confirmAlert` without correctly importing it as a named export.","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined."},{"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.","cause":"The required CSS file for `react-confirm-alert` has not been imported or is not being processed by the build system.","error":"Dialog appears without any styling or looks unformatted."},{"fix":"Downgrade `react-confirm-alert` to version 2.x.x by running `npm install react-confirm-alert@^2.0.0 --save`.","cause":"Using `react-confirm-alert` version 3.x.x (which targets React 18) with an application running React 17 or an older version.","error":"TypeError: Cannot read properties of undefined (reading 'call') or similar React DOM errors when using with React 17 or older."}],"ecosystem":"npm"}