React Bootstrap Confirm Delete Modal Example

This is a simple React application demonstrating the usage of the react-bootstrap-confirm-delete component for handling confirmation before deletion. It uses React, Bootstrap, and the react-bootstrap-confirm-delete package.

Features

• Delete confirmation modal using Bootstrap
• Clean and minimal UI
• Easy integration with any React app

Demo

Getting Started

Prerequisites

Ensure you have the following installed:

• Node.js
• npm or yarn

Installation

1. Clone the repository or copy the code into your project.
2. Navigate to your project directory.
3. Install dependencies:

npm install
Also install Bootstrap and the modal component:

bash

npm install bootstrap react-bootstrap-confirm-delete
Usage
Ensure you import Bootstrap CSS and the modal component:


import ConfirmDeleteModal from 'react-bootstrap-confirm-delete';
import 'bootstrap/dist/css/bootstrap.min.css';
Here's the full component code (src/App.jsx):

jsx
Copy
Edit
import React, { useState } from 'react';
import ConfirmDeleteModal from 'react-bootstrap-confirm-delete';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  const [showModal, setShowModal] = useState(false);

  const handleDelete = () => {
    alert('Item deleted!');
    setShowModal(false);
  };

  return (
    <div className="container mt-5">
      <h1>React Bootstrap Confirm Delete</h1>
      <button className="btn btn-danger" onClick={() => setShowModal(true)}>
        Delete Item
      </button>

      <ConfirmDeleteModal
        show={showModal}
        onClose={() => setShowModal(false)}
        onDelete={handleDelete}
        title="Confirm Delete"
        message="Are you sure you want to permanently delete this item?"
      />
    </div>
  );
}

export default App;