Pulse Toast ⚡

A lightweight toast notification library for React with smooth animations and a simple API.

Pulse Toast helps you display elegant toast notifications in your React applications with minimal setup.

See examples at - https://pulsetoast.vercel.app

✨ Features

• ⚡ Lightweight and fast
• 🚀 Simple API
• 📱 Responsive design
• 🎬 Smooth animations
• 🔧 TypeScript support

📦 Install using npm

npm i pulse-toast

🧩 Use the Toaster

<div>
  <Toaster />
</div>

Add the Toaster component at the top of your application.

It has a position prop of type string which supports the following values:

• top-left
• top-center
• top-right
• bottom-left
• bottom-center
• bottom-right

Example:

<Toaster position="top-right" />

🍞 Use the toast function

toast({ message: "Hello developer" })

The toast function accepts an object with the following properties:

message

• Description: The toast message
• Type: string
• Required: ✅ Yes

duration

• Description: Time after which the toast disappears
• Type: number
• Required: ❌ No
• Default: 3000ms (3 seconds)

Example:

toast({
  message: "Saved successfully",
  duration: 5000
})

type

• Type: string
• Required: ❌ No
• Values:
  • success
  • failure

Example:

toast({
  message: "Operation successful",
  type: "success"
})

icon

Add a custom icon to the toast.

• Type: string (emoji) | ReactNode
• Required: ❌ No

Example with emoji:

toast({
  message: "File uploaded",
  icon: "📁"
})

Example with React icon:

import { Check } from "lucide-react"

toast({
  message: "Saved successfully",
  icon: <Check />
})

closeButton

• Type: boolean
• Required: ❌ No
• Values:
  • true
  • false
• Closes the toast immediately on clicking on it

theme

• Required: ❌ No
• Values:
  • dark
  • default

Example:

toast({
  message: "Operation successful",
  type: "success",
  theme: "dark"
})

💡 Code Examples

Basic Toast

import { toast } from "pulse-toast";

toast({
  message: "Hello developer"
});

Success Toast

toast({
  message: "Profile updated successfully",
  type: "success"
});

Failure Toast

toast({
  message: "Something went wrong",
  type: "failure"
});

Custom Duration

toast({
  message: "This will stay longer",
  duration: 5000
});

Custom Icon (Emoji)

toast({
  message: "File uploaded",
  icon: "📁"
});

Custom Icon (React Icon)

import { Check } from "lucide-react";
import { toast } from "pulse-toast";

toast({
  message: "Saved successfully",
  icon: <Check />
});

Complete Example

import { Toaster, toast } from "pulse-toast";

function App() {
  return (
    <div>
      <Toaster position="top-right" />

      <button
        onClick={() =>
          toast({
            message: "Welcome to Pulse Toast!",
            type: "success",
            duration: 4000
          })
        }
      >
        Show Toast
      </button>
    </div>
  );
}

export default App;

📚 Why Pulse Toast?

Many toast libraries are either too heavy or overcomplicated.

Pulse Toast focuses on:

• Simplicity
• Performance
• Developer experience

You get a clean API without unnecessary complexity.

🛠 Built With

• React
• TypeScript
• Modern animation libraries

👨‍💻 Author

Ayantik Sarkar

Student at NIT Rourkela
Passionate about web development and building developer tools.

📜 License

MIT License

⭐ Support

If you find this project helpful, consider giving it a ⭐ on GitHub.