noti-toast

v1.1.0

Published

13 days ago

A dynamic, interactive notification library with fluid SVG path morphing animations.

0High
0Medium
0Low

sukhjitsingh

react toast notification framer-motion svg-morphing dynamic tailwind

Noti 🔔✨

A sleek, premium, highly interactive React and Tailwind CSS notification library featuring fluid SVG path morphing animations, spring-based motion, and intelligent stackable notification decks.

✨ Features

Fluid SVG Path Morphing: The background container shape adapts fluidly as content expands, collapses, or transitions between states.
Interactive Staggered Decks: Multiple active notifications stack neatly in 3D decks and expand dynamically when hovered.
Flexible Positioning: Supports 6 responsive screen locations: top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right.
Pre-styled Theme Support: Beautiful preconfigured templates for success, error, warning, and info types, automatically adapting to light/dark themes.
Developer Debug Mode: Append ?debug=true to your application URL to inspect morphing vectors and boundaries in real-time.
Zero Jitter: Built using rounded sub-pixel measurements to ensure animations are free of rendering wobble.

📦 Installation

To install the library in your project:

npm install noti-toast

🚀 Configuration

1. Update Tailwind CSS Content Paths

Because noti utilizes Tailwind utility classes, your application's Tailwind CSS compiler must scan the library's compiled source code. Add the node_modules location to your tailwind.config.js or tailwind.config.ts:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}", // Your app's files
    "./node_modules/noti-toast/dist/**/*.{js,ts,jsx,tsx}" // Add this line!
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

🛠️ Usage

1. Add the Viewport Component

Mount the NotiRoot component near the root of your application layout (e.g., inside layout.tsx or App.tsx) to serve as the rendering portal for all active notification streams.

// app/layout.tsx
import { NotiRoot } from 'noti-toast'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        {/* Notification rendering portal with custom defaults and hover pause toggle */}
        <NotiRoot position="top-right" duration={3000} pauseOnHover={true} />
      </body>
    </html>
  )
}

2. Triggering Notifications

Import the global noti controller in any component or function to trigger responsive, beautifully styled notifications.

"use client"

import { noti } from 'noti-toast'

export default function ActionButton() {
  const triggerSuccess = () => {
    noti.success("Build compiled successfully!", {
      title: "Success",
      position: "top-right",
      duration: 5000,
      action: {
        label: "View logs",
        onClick: (id) => console.log("Notification closed:", id)
      }
    })
  }

  const triggerError = () => {
    noti.error("Failed to establish server connection.", {
      title: "Connection Failed",
      position: "bottom-center"
    })
  }

  return (
    <div className="flex gap-4">
      <button onClick={triggerSuccess}>Success Notification</button>
      <button onClick={triggerError}>Error Notification</button>
    </div>
  )
}

📖 API Reference

`noti(message: string, options?: NotiOptions)`

Triggers a base information notification.

`NotiOptions`

Helper Methods

noti.success(title, options)
noti.error(title, options)
noti.warning(title, options)
noti.info(title, options)
noti.custom(options)
noti.dismiss(id)
noti.update(id, options)
noti.promise(promise, options)

`useNotis()`

A custom React hook that returns an array of currently active NotiActive state objects.

🎨 Theme & Customization

The library is designed to automatically adapt to light/dark themes by referencing utility classes. When loaded inside applications utilizing next-themes, the viewport automatically synchronizes with active system resolutions seamlessly.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme