@ashutoshmishr0/sweet-modal

A smooth, customizable alert and modal library for React and Next.js. Supports success, error, warning, info dialogs, toast notifications, confirm dialogs, and full color customization — with zero dependencies.

Installation

npm install @ashutoshmishr0/sweet-modal

Quick Start

"use client";

import { SweetModal } from "@ashutoshmishr0/sweet-modal";

export default function Example() {
  return (
    <button onClick={() => SweetModal.success({ title: "Done!", text: "It works." })}>
      Click Me
    </button>
  );
}

Import Options

All three import styles work:

// Named import
import { SweetModal } from "@ashutoshmishr0/sweet-modal";

// Default import
import SweetModal from "@ashutoshmishr0/sweet-modal";

// From /react subpath (hook + component included)
import { SweetModal, useSweetModal } from "@ashutoshmishr0/sweet-modal/react";

Shorthand Methods

The quickest way to show alerts:

SweetModal.success({ title: "Success", text: "Data saved successfully!" });

SweetModal.error({ title: "Error", text: "Something went wrong!" });

SweetModal.warning({ title: "Warning", text: "This action cannot be undone." });

SweetModal.info({ title: "Info", text: "Your session will expire in 5 minutes." });

SweetModal.question({ title: "Question", text: "Do you want to continue?" });

Confirm Dialog

Returns a Promise so you can wait for the user's response:

"use client";

import { SweetModal } from "@ashutoshmishr0/sweet-modal";

export default function DeleteButton() {
  const handleDelete = async () => {
    const result = await SweetModal({
      icon: "warning",
      title: "Delete this item?",
      text: "This action cannot be undone.",
      showCancelButton: true,
      confirmButtonText: "Yes, delete it",
      cancelButtonText: "Cancel",
      confirmButtonColor: "#f87171",
    });

    if (result.isConfirmed) {
      SweetModal.success({ title: "Deleted!", timer: 1500, showConfirmButton: false });
    }
  };

  return <button onClick={handleDelete}>Delete</button>;
}

Toast Notification

SweetModal.toast({
  icon: "success",
  title: "Saved successfully",
});

// Custom toast with timer
SweetModal({
  toast: true,
  position: "top-end",
  icon: "success",
  title: "Changes saved",
  timer: 3000,
  timerProgressBar: true,
  showConfirmButton: false,
});

Custom Colors and Styling

Every color and style property is customizable:

SweetModal({
  title: "Custom Theme",
  text: "You can change all colors.",
  icon: "info",
  iconColor: "#a78bfa",
  background: "#1e1e2e",
  color: "#ffffff",
  confirmButtonColor: "#a78bfa",
  cancelButtonColor: "#555555",
  borderRadius: "1.5rem",
  width: "30rem",
});

useSweetModal Hook

Use this hook when you need to track modal visibility in React state:

"use client";

import { useSweetModal } from "@ashutoshmishr0/sweet-modal/react";

export default function Example() {
  const { fire, isVisible } = useSweetModal();

  const handleClick = async () => {
    const result = await fire({
      icon: "warning",
      title: "Are you sure?",
      showCancelButton: true,
    });

    if (result.isConfirmed) {
      console.log("Confirmed");
    }
  };

  return (
    <div>
      <p>Modal is {isVisible ? "open" : "closed"}</p>
      <button onClick={handleClick}>Open</button>
    </div>
  );
}

Declarative Component

Control the modal with React state using the SweetModalComponent:

"use client";

import { useState } from "react";
import { SweetModalComponent } from "@ashutoshmishr0/sweet-modal/react";

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open Modal</button>
      <SweetModalComponent
        open={open}
        onClose={() => setOpen(false)}
        icon="success"
        title="Hello!"
        text="This is controlled by React state."
        confirmButtonColor="#6c5ce7"
      />
    </>
  );
}

Auto-Close with Timer

SweetModal({
  icon: "info",
  title: "Redirecting...",
  text: "You will be redirected in 3 seconds.",
  timer: 3000,
  timerProgressBar: true,
  showConfirmButton: false,
});

Reusable Presets with mixin

Define a preset once and reuse it everywhere:

import { SweetModal } from "@ashutoshmishr0/sweet-modal";

const NetworkError = SweetModal.mixin({
  icon: "error",
  title: "Network Error",
  confirmButtonColor: "#f87171",
});

// Use it anywhere
NetworkError({ text: "Could not connect to the server." });
NetworkError({ text: "Request timed out. Please try again." });

Programmatic Control

// Close the currently open modal
SweetModal.close();

// Check if a modal is currently visible
SweetModal.isVisible(); // returns true or false

All Options

| Option | Type | Default | Description | |---|---|---|---| | title | string | "" | Title text of the modal | | text | string | "" | Body text of the modal | | html | string | null | Custom HTML content (overrides text) | | icon | string | null | success, error, warning, info, question | | iconColor | string | auto | Custom color for the icon | | background | string | #ffffff | Background color of the popup | | color | string | #2d3436 | Text color of the popup | | width | string | 32rem | Width of the popup | | borderRadius | string | 1rem | Border radius of the popup | | showConfirmButton | boolean | true | Show or hide the confirm button | | showCancelButton | boolean | false | Show or hide the cancel button | | confirmButtonText | string | OK | Label for the confirm button | | cancelButtonText | string | Cancel | Label for the cancel button | | confirmButtonColor | string | #6c5ce7 | Background color of the confirm button | | cancelButtonColor | string | #aaaaaa | Background color of the cancel button | | showCloseButton | boolean | false | Show an X button to close the modal | | timer | number | null | Auto-close after N milliseconds | | timerProgressBar | boolean | false | Show a progress bar for the timer | | allowOutsideClick | boolean | true | Close when clicking outside the modal | | allowEscapeKey | boolean | true | Close when pressing the Escape key | | toast | boolean | false | Show as a small toast notification | | position | string | center | top, bottom, top-end, bottom-end, top-start, bottom-start | | backdrop | boolean | true | Show the dark backdrop overlay | | animation | boolean | true | Enable or disable animations | | customClass | object | {} | Custom CSS classes: popup, title, content, confirmButton, cancelButton |

Promise Result

Every SweetModal() call returns a Promise that resolves with:

{
  isConfirmed: boolean,  // true if confirm button was clicked
  isDismissed: boolean,  // true if cancelled or closed
  value: true | false | null
}

Notes for Next.js

• Always add "use client" at the top of any file that uses this library.
• The library injects its styles automatically. No CSS import is needed.
• Works with both App Router and Pages Router.

License

MIT