Jelly

An opinionated, physics-based toast notification library for React.

Installation

npm install jelly-toast

Quick Start

import { jelly, Toaster } from "jelly-toast";
import "jelly-toast/styles.css";

export default function App() {
  return (
    <>
      <Toaster position="top-right" />
      <button onClick={() => jelly.success({ title: "Success!" })}>
        Show Toast
      </button>
    </>
  );
}

Usage

Basic Toasts

jelly.success({ title: "Operation successful" });
jelly.error({ title: "Something went wrong" });
jelly.warning({ title: "Warning message" });
jelly.info({ title: "Information" });
jelly.action({ title: "Action required" });

With Description

jelly.success({
  title: "Profile Updated",
  description: "Your profile has been successfully updated.",
});

With Custom Button

jelly.action({
  title: "New Update Available",
  description: "A new version is ready to install.",
  button: {
    title: "Update Now",
    onClick: () => console.log("Updating..."),
  },
});

Promise Handling

jelly.promise(fetchData(), {
  loading: { title: "Loading..." },
  success: { title: "Data loaded!" },
  error: { title: "Failed to load data" },
});

API

jelly Methods

• jelly.show(options) - Show a toast with custom state
• jelly.success(options) - Show success toast
• jelly.error(options) - Show error toast
• jelly.warning(options) - Show warning toast
• jelly.info(options) - Show info toast
• jelly.action(options) - Show action toast
• jelly.promise(promise, options) - Handle promise states
• jelly.dismiss(id) - Dismiss a specific toast
• jelly.clear(position?) - Clear all toasts or by position

Options

interface JellyOptions {
  title?: string;
  description?: ReactNode | string;
  position?: JellyPosition;
  duration?: number | null;
  icon?: ReactNode | null;
  styles?: JellyStyles;
  fill?: string;
  roundness?: number;
  autopilot?: boolean | { expand?: number; collapse?: number };
  button?: JellyButton;
}

Toaster Props

interface JellyToasterProps {
  position?: JellyPosition; // "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"
  offset?: number | string | JellyOffsetConfig;
  options?: Partial<JellyOptions>;
}

License

MIT