npm package: @sghere/react-confirm
Description: ✨ A zero-setup, Promise-based confirm dialog for React — beautifully simple and type-safe.
Author: Shubham Gaikwad
Latest version: 1.0.4

# ⚡️ @sghere/react-confirm

> A zero-setup, **Promise-based confirm dialog** for React — lightweight, type-safe, and beautifully styled with Tailwind CSS.

[![npm version](https://img.shields.io/npm/v/@sghere/react-confirm?color=%2338bdf8&logo=npm)](https://www.npmjs.com/package/@sghere/react-confirm)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
[![Build](https://img.shields.io/github/actions/workflow/status/sghere/react-confirm/release.yml?label=Build&logo=github)](https://github.com/sghere/react-confirm/actions)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue.svg?logo=typescript)](https://www.typescriptlang.org/)
[![React](https://img.shields.io/badge/Made%20with-React-61DAFB.svg?logo=react)](https://react.dev/)

---

## ✨ Features

- 🧩 Zero configuration — works out of the box.
- ⚛️ Fully compatible with React 16+ and 18.
- 💬 Promise-based API: `await confirm({...})`
- 🧠 Type-safe with `ConfirmOptions` support.
- 🎨 Tailwind-ready styling — easily themeable.
- 🪶 Lightweight — under 5 KB gzipped.

---

## 📦 Installation

```bash
npm install @sghere/react-confirm
# or
yarn add @sghere/react-confirm
# or
bun add @sghere/react-confirm
```

> ⚠️ Requires `react` and `react-dom` as peer dependencies.

---

## 🚀 Quick Start

### 1️⃣ Import and use

```tsx
import { confirm } from "@sghere/react-confirm";
import "@sghere/react-confirm/dist/react-confirm.css";

// Example usage
<button
  onClick={() => {
    confirm({
      heading: "Are you sure?",
      body: "This will be deleted",
      onConfirm: () => {
        alert("Deleted ✅");
      },
    });
  }}
>
  Delete Item
</button>

```

### 2️⃣ Default Look

| Element | Default Text |
|----------|---------------|
| Heading | “Confirmation” |
| Message | “Are you sure you want to continue?” |
| Confirm Button | “Confirm” |
| Cancel Button | “Cancel” |

---

## ⚙️ Props (`ConfirmOptions`)

| Prop | Type | Default | Description |
|------|------|----------|-------------|
| `heading` | `React.ReactNode` | `"Confirmation"` | Dialog title |
| `body` | `React.ReactNode` | `undefined` | Optional content above message |
| `message` | `string` | `"Are you sure you want to continue?"` | Main dialog text |
| `confirmText` | `string` | `"Confirm"` | Text for confirm button |
| `cancelText` | `string` | `"Cancel"` | Text for cancel button |
| `onConfirm` | `(e) => void` | `undefined` | Confirm callback |
| `onCancel` | `(e) => void` | `undefined` | Cancel callback |
| `footer` | `(actions) => React.ReactNode` | `undefined` | Custom footer renderer with handlers |

---

## 🎨 Styling

`@sghere/react-confirm` is **Tailwind-ready** — include its default stylesheet or use your own theme.

### Include Default CSS

```ts
import "@sghere/react-confirm/dist/react-confirm.css";
```

---

## 🧪 Development

```bash
bun install
bun run build
bun run dev
```

To test locally before publishing:

```bash
npm pack
npm install ../react-confirm/react-confirm-1.0.0.tgz
```

---

## 🧱 Tech Stack

- ⚛️ React 18  
- 🎨 Tailwind CSS 4  
- 🧩 TypeScript 5  
- ⚡️ Bundled with TSUP  

---

## 📄 License

MIT © [Shubham Gaikwad](https://github.com/sghere)

---

## 🤝 Contributing

1. Fork this repository  
2. Create a new feature branch  
3. Commit using [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) (`feat:`, `fix:`, etc.)  
4. Push and open a Pull Request 🎉  

---

## 🌍 Links

- 📦 **NPM Package** – [@sghere/react-confirm](https://www.npmjs.com/package/@sghere/react-confirm)  
- 🧠 **Documentation & Examples** – [GitHub Repo](https://github.com/sghere/react-confirm)  
- 🐛 **Report Issues** – [Issue Tracker](https://github.com/sghere/react-confirm/issues)  
- 💬 **Author Profile** – [Shubham Gaikwad](https://github.com/sghere)