{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-confirm-alert"],"cli":null},"imports":["import { confirmAlert } from 'react-confirm-alert';","import 'react-confirm-alert/src/react-confirm-alert.css';","import type { Options } from 'react-confirm-alert';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}