Super Notifier

This is a Component for displaying alert messages based on status.

1. Render the SuperNotifier Component once (usually near the root of your app):

import { SuperNotifier, alertService } from "super-notifier";

function App() {
  return (
    <>
      <SuperNotifier />
    </>
  );
}

2. Fire an alert from anywhere:

alertService.success("Saved successfully");
alertService.error("Something went wrong");
alertService.info("Heads up!");
alertService.warning("Careful...");
alertService.alert("General notice");

Props

| Prop | Type | Default | Description | | :----------------- | :------- | :------------- | :------------------------------------------------------------------------------ | | slideInFrom | string | "bottom-right" | Entry position. One of: "bottom-right", "bottom-left", "top-right", "top-left". | | height | number | 30 | Height of each toast in px. | | bottomGap | number | 30 | Gap between stacked toasts in px. | | timeoutTime | number | 3000 | Used by AscMotion when a progress bar element is rendered. | | transitionType | string | "linear" | CSS timing function (e.g., "ease", "linear", "ease-in", cubic-bezier(...)). | | transitionDuration | number | 300 | Transition duration in ms. | | progressBarColor | string | — | Color of the progress bar when provided. | | onClick | function | — | Click handler for each toast item. |

Examples

Trigger from a button:

import React from "react";
import { SuperNotifier, alertService } from "super-notifier";

function App() {
  return (
    <div>
      <button onClick={() => alertService.success("Custom Toast Message")}>Click</button>
      <SuperNotifier />
    </div>
  );
}

Position and animation customization:

<SuperNotifier slideInFrom="top-left" transitionType="cubic-bezier(0.68, -0.55, 0.25, 1.35)" transitionDuration={400} height={36} bottomGap={28} />

Note

Do not include a trailing semicolon in transitionType.

• Incorrect: "cubic-bezier(0.68, -0.55, 0.25, 1.35);"
• Correct: "cubic-bezier(0.68, -0.55, 0.25, 1.35)"