⚡️ @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