⚡️ @sghere/react-confirm

A zero-setup, Promise-based confirm dialog for React — lightweight, type-safe, and beautifully styled with Tailwind CSS.

✨ 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

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

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

import "@sghere/react-confirm/dist/react-confirm.css";

🧪 Development

bun install
bun run build
bun run dev

To test locally before publishing:

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

🤝 Contributing

1. Fork this repository
2. Create a new feature branch
3. Commit using Conventional Commits (feat:, fix:, etc.)
4. Push and open a Pull Request 🎉

🌍 Links

• 📦 NPM Package – @sghere/react-confirm
• 🧠 Documentation & Examples – GitHub Repo
• 🐛 Report Issues – Issue Tracker
• 💬 Author Profile – Shubham Gaikwad