{"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,"search_vec":"'17':45 '18':40 '2':50,94 '3':97 '3.0.6':35 'action':25 'address':87 'advanc':117 'alert':3,8,122,128,134 'allow':64 'also':63 'api':61 'appear':81 'browser':75 'bug':90 'built':108 'built-in':107 'cadenc':80 'case':119 'compon':12,69 'confirm':2,7,17,76,125,127,133,137,139,141 'confirm-dialog':138 'confirm/cancel':29 'coupl':111 'current':31 'custom':67,114 'customiz':16 'develop':20 'dialog':4,18,77,126,140,142 'differenti':102 'enabl':19 'exampl':123 'featur':88 'fix':91 'flexibl':72 'fulli':66 'function':60 'javascript':120 'js':130 'key':101 'librari':56 'like':26 'minor':85 'moder':82 'nativ':74 'offer':57 'older':48 'option':115 'project':42 'prompt':22 'provid':14,70 'react':1,6,11,39,44,121,129,132,136 'react-confirm':135 'react-confirm-alert':5,131 'redux':124 'releas':79 'seri':99 'sever':84 'signific':71 'simplic':105 'specif':37 'stabl':32 'straightforward':59 'strong':113 'style':110 'support':38 'typescript':143 'ui':68 'updat':86 'use':43,54,118 'user':23 'version':33,49 'within':92 'x.x':46,51,95,98 'yes/no':27","created_at":"2026-04-19T13:39:11.333105+00:00","updated_at":"2026-04-19T13:39:11.333105+00:00","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","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/GA-MO/react-confirm-alert","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/react-confirm-alert","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}