notify-sdk

A lightweight, highly customizable React SDK for displaying beautiful Toast Notifications and Modals.

Features

• Toast Notifications: Stackable, animated, and theme-aware notifications.
• Modals: Fully customizable, centered alert dialogs with robust animations.
• Developer Overlay: A built-in configuration panel available only in development (NODE_ENV !== "production") to test and tweak styles in real-time.
• Templates: Choose from 5 beautiful pre-built templates (from Light Minimal to Pitch Black) as a starting point.

Installation

You can install the package using npm or yarn:

npm install notify-sdk

Basic Setup

Wrap your application with the NotifyProvider. This will inject the necessary context and elements into your DOM.

import { NotifyProvider } from 'notify-sdk';

function MyApp({ Component, pageProps }) {
  return (
    <NotifyProvider>
      <Component {...pageProps} />
    </NotifyProvider>
  );
}

export default MyApp;

Usage

Use the provided hooks to trigger notifications and modals from anywhere within your application.

Triggering Notifications

import { useNotification } from 'notify-sdk';

function MyComponent() {
  const notify = useNotification();

  const handleSuccess = () => {
    notify.success("Action completed successfully!");
  };

  const handleError = () => {
    notify.error("Something went wrong.");
  };

  return <button onClick={handleSuccess}>Show Notification</button>;
}

Triggering Modals

import { useModal } from 'notify-sdk';

function MyComponent() {
  const modal = useModal();

  const showWarning = () => {
    modal.warn({
      title: "Are you sure?",
      message: "This action cannot be undone.",
      confirmText: "Yes, delete",
      closeText: "Cancel"
    });
  };

  return <button onClick={showWarning}>Show Modal</button>;
}

Development Tools

When running your app in development (process.env.NODE_ENV !== "production"), you will see a floating "SDK" button in the bottom corner of your screen.

Clicking this opens the Notify SDK Overlay, where you can visually customize colors, positioning, padding, and animations. Any changes you save here are persisted in your local storage so they remain active while you develop.

Note: This overlay button is completely hidden in production deployments.

License

MIT