Theam Alert Dialog

A reusable React alert dialog component with custom CSS styling, designed for easy integration into any React application.

Features

• Customizable alert dialog with overlay
• Trigger button integration
• Cancel and confirm actions
• Responsive design
• Built with React and raw CSS
• No external dependencies (except React)

Installation

npm install my-alert-dialog

Usage

import React, { useState } from "react";
import { AlertDialog } from "react-alert-dialog-component";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => setIsOpen(true);
  const handleClose = () => setIsOpen(false);
  const handleConfirm = () => {
    console.log("Confirmed!");
    setIsOpen(false);
  };

  return (
    <div>
      <button onClick={handleOpen}>Show Dialog</button>

      <AlertDialog
        isOpen={isOpen}
        onClose={handleClose}
        onConfirm={handleConfirm}
        title="Are you absolutely sure?"
        description="This action cannot be undone. This will permanently delete your account and remove your data from our servers."
        cancelText="Cancel"
        confirmText="Continue"
      />
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | | ------------- | -------- | ---------- | --------------------------------------- | | isOpen | boolean | - | Controls whether the dialog is visible | | onClose | function | - | Callback when dialog should close | | onConfirm | function | - | Callback when confirm button is clicked | | title | string | - | Dialog title | | description | string | - | Dialog description | | cancelText | string | "Cancel" | Text for cancel button | | confirmText | string | "Continue" | Text for confirm button |

Styling

The component includes its own CSS styles. You can override them by adding your own CSS with higher specificity or by modifying the component's CSS file.

Development

To build the library:

npm run build

To run the demo:

npm run dev

License

MIT

1. Clone the repository:

   git clone <repository-url>
   cd package

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to http://localhost:5173

Usage

Click the "Show Dialog" button to open the alert dialog. You can cancel or confirm the action.

Project Structure

src/
├── components/
│   └── AlertDialog.jsx  # Reusable alert dialog component
├── App.jsx              # Main component
├── App.css              # Styles for the alert dialog
├── main.jsx             # Entry point
└── assets/              # Static assets

Technologies Used

• React 19
• Vite
• CSS

Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

License

This project is open source and available under the MIT License.