Install with NPM
npm install notify-boltInstall with Yarn
yarn add notify-boltBasic usage
import { showNotify } from "notify-bolt";
const handleClick = () => {
showNotify({
title: "Delete this item?",
message: "This action is permanent. Do you wish to proceed?",
variant: "classic",
status: "warning",
showConfirmButton: true,
showCancelButton: true,
})
.then(() => {
// User confirmed
})
.catch(() => {
// User dismissed
});
};1. title
The title displayed at the top of the modal. Accepts plain text or a React component for rich content.
Accepted Types:string,React.ReactNode.
Examples:
showNotify({ title: "Are you sure?" });showNotify({ title: <strong>Important Notice</strong> });2. message
The main body content of the modal. Can be simple text or a custom JSX structure.
Accepted Types:string,React.ReactNode.
Examples:
showNotify({ message: "This action cannot be undone." });showNotify({ message: <p>Please <em>read carefully</em> before proceeding.</p> });3. status
Determines the modal's theme (color and icon) based on the context, like 'success' or 'error'.
Accepted Types:success,error,warning,info,default.
Examples:
showNotify({ status: "success" });4. variant
Sets the modal's layout style. 'Classic' for traditional, 'Default' for a simpler appearance.
Accepted Types:classic,default.
Examples:
showNotify({ variant: "classic" });5. size
Adjusts the size of the modal window. Useful for alerts, confirmations, and larger dialogs.
Accepted Types:xs,sm,md,lg.
Examples:
showNotify({ size: "xs" });6. icon
Custom icon for the modal. Accepts emoji strings, custom React elements.
Accepted Types:string,React.ReactNode,status.
Examples:
showNotify({ icon: "🔥" });showNotify({ icon: <CustomIcon /> });7. iconType
Specifies whether the icon is rendered in a filled ('classic') or outlined style.
Accepted Types:classic,outline.
Examples:
showNotify({ iconType: "classic" });8. showConfirmButton
If true, displays a confirm button for positive actions.
Accepted Types:boolean.
Examples:
showNotify({ showConfirmButton: true });9. confirmButtonText
Label text or JSX for the confirm button.
Accepted Types:string,React.ReactNode.
Examples:
showNotify({ confirmButtonText: "Yes, continue" });showNotify({ confirmButtonText: <span>Proceed</span> });10. showCancelButton
If true, shows a cancel button for dismissing the modal without action.
Accepted Types:boolean.
Examples:
showNotify({ showCancelButton: true });11. cancelButtonText
Custom label for the cancel button.
Accepted Types:string,React.ReactNode.
Examples:
showNotify({ cancelButtonText: "Abort" });showNotify({ cancelButtonText: <strong>Cancel</strong> });12. showDenyButton
If true, displays a deny button, offering an alternative to confirm/cancel.
Accepted Types:boolean.
Examples:
showNotify({ showDenyButton: true });13. denyButtonText
Label text or JSX for the deny button.
Accepted Types:string,React.ReactNode.
Examples:
showNotify({ denyButtonText: "No, thanks" });showNotify({ denyButtonText: <span>Refuse</span> });14. showCloseIcon
Whether a close (X) icon is displayed on the modal header.
Accepted Types:boolean.
Examples:
showNotify({ showCloseIcon: false });15. closeIcon
Custom close icon element or string label.
Accepted Types:string,React.ReactNode.
Examples:
showNotify({ closeIcon: "❌" });showNotify({ closeIcon: <div>X</div> });16. mode
Switches between light and dark theme modes for modal appearance.
Accepted Types:light,dark.
Examples:
setNotifyDefaults({ mode: "dark" });17. animation
Specifies the entrance animation style for the modal transition.
Accepted Types:fade,slide-up,slide-down,slide-left,slide-right,zoom-in,zoom-out.
Examples:
showNotify({ animation: "zoom-in" });18. timer
Automatically closes the modal after the specified time (in milliseconds).
Accepted Types:number.
Examples:
showNotify({ timer: 3000 });19. timerProgressBar
Shows a visual progress bar when timer is active.
Accepted Types:boolean.
Examples:
showNotify({ timerProgressBar: true });20. allowOutsideClick
Enables closing the modal by clicking outside of it.
Accepted Types:boolean.
Examples:
showNotify({ allowOutsideClick: true });21. focusConfirm
Automatically focuses the confirm button when the modal appears.
Accepted Types:boolean.
Examples:
showNotify({ focusConfirm: true });22. onDidOpen
Callback function triggered immediately after the modal is opened.
Accepted Types:() => void.
Examples:
showNotify({ onDidOpen: () => console.log("Modal opened!") });23. onWillClose
Callback function triggered right before the modal closes.
Accepted Types:() => void.
Examples:
showNotify({ onWillClose: () => console.log("Modal closing...") });24. celebrate
Triggers a celebration animation (like confetti) when the modal opens.
Accepted Types:boolean.
Examples:
showNotify({ celebrate: true });25. celebrationType
Specifies the type of celebration animation to display when 'celebrate' is true.
Accepted Types:basic,random,realistic,fireworks,snow,pride.
Examples:
showNotify({ celebrationType: "fireworks" });26. template
Completely custom modal body. Can access action handlers for confirm/deny within the template function.
Accepted Types:React.ReactNode,(actions: { resolve: () => void; reject: () => void }) => React.ReactNode.
Examples:
showNotify({ template: <div>Custom Modal</div> });showNotify({ template: ({ resolve, reject }) => (
<div>
<p>Custom Content</p>
<button onClick={resolve}>Accept</button>
<button onClick={reject}>Decline</button>
</div>
) });27. resolve
Programmatic handler to resolve the modal manually with 'confirm' or 'deny'. This behaves like a promise `.then()` handler.
Accepted Types:("confirm" | "deny") => void).
Examples:
showNotify({
title:"testing"
}).then((res) => {
if (res === "confirm") {
// Handle confirm logic
console.log("Confirmed!");
} else if (res === "deny") {
// Handle deny logic
console.log("Denied!");
}
});28. reject
Function to reject the modal action. This behaves like a promise `.catch()` handler.
Accepted Types:() => void.
Examples:
showNotify({
title:"testing"
}).catch((error) => {
// Handle reject logic
console.log("Action rejected", error);
});29. style
Custom inline styles to override modal components like button, modal container, overlay, etc.
Accepted Types:object.
Examples:
showNotify({
style: {
modal: { backgroundColor: "lightblue" },
title: { color: "darkblue" },
button: { backgroundColor: "green" }
}
});showNotify.import { setNotifyDefaults } from "notify-bolt";
setNotifyDefaults({
mode: "light",
defaultSize: "sm",
allowOutsideClick: true,
style: {},
});