https://github.com/codx-ak/notify-bolt
A lightweight and themeable modal alert system for React, built with customization in mind. Supports classic layout, dark/light themes, and global config — ideal for confirmations, errors, success messages, and more.
https://github.com/codx-ak/notify-bolt
codx codx-ak notifications notify notify-bolt react react-notifications
Last synced: about 1 month ago
JSON representation
A lightweight and themeable modal alert system for React, built with customization in mind. Supports classic layout, dark/light themes, and global config — ideal for confirmations, errors, success messages, and more.
- Host: GitHub
- URL: https://github.com/codx-ak/notify-bolt
- Owner: codx-ak
- License: mit
- Created: 2025-09-21T13:56:14.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-12-25T11:13:50.000Z (5 months ago)
- Last Synced: 2026-02-19T19:57:27.379Z (3 months ago)
- Topics: codx, codx-ak, notifications, notify, notify-bolt, react, react-notifications
- Language: TypeScript
- Homepage: https://codx-ak.github.io/notify-bolt/
- Size: 1.24 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: ChangeLog.md
- License: LICENSE
Awesome Lists containing this project
README
✨ Experience Notify Bolt in Action
A blazing-fast, customizable, and elegant modal notification system for React.
## ✨ Features
- ✅ Easy to integrate
- 🎨 Fully customizable (styles, icons, animations, etc.)
- 🌗 Light & Dark mode support
- ⚡ Zero dependencies
- 💡 Built-in variants: `classic`, `default`
- 🧩 Extendable global defaults with `setNotifyDefaults`
- 🎥 Smooth modal animations
- 🔄 Async handling with `Promise` (`confirm`, `deny`, `dismiss`)
## 📦 Installation
```bash
npm install notify-bolt
# or
yarn add notify-bolt
# or
pnpm add notify-bolt
```
## 🚀 Quick Usage
```tsx
import { showNotify } from 'notify-bolt';
const handleClick = () => {
showNotify({
title: 'Delete this item?',
message: 'This action is permanent. Do you wish to proceed?',
variant: 'classic',
mode: 'dark',
status: 'warning',
showConfirmButton: true,
showCancelButton: true,
})
.then((result) => {
if (result === 'confirm') {
// ✅ User confirmed
} else if (result === 'deny') {
// ⚠️ User denied
}
})
.catch(() => {
// ❌ User dismissed
});
};
```
## 🔧 Global Configuration
You can set defaults once and reuse them across all modals:
```tsx
import { setNotifyDefaults } from 'notify-bolt';
setNotifyDefaults({
mode: 'light',
defaultSize: 'sm',
animation: 'slide-up',
confirmButtonText: 'Okay',
cancelButtonText: 'Cancel',
icons: {
success: '✅',
error: '❌',
info: 'ℹ️',
},
});
```
## 📜 License
MIT © [codx-ak](https://github.com/codx-ak)