@pheralb/toast v1.0.0

Documentation   ✦   Getting Started   ✦   Contribute   ✦   Roadmap   ✦   License

🪐 Features

• 🍂 Lightweight.
• ✅ Accessible.
• 🎨 Light, dark & system theme mode.
• ⏲️ Don't close automatically when the user hover over the toast.
• 🏗️ Customizable toast position.
• 🍃 Disable transitions if the user has disabled them in the system.
• 💙 Built completely with Typescript.

✨ Inspiration

• 🎨 Notification Design by Medusa.js UI Framework.
• 🛠️ Typescript API by Sonner.
• 🪄 Phosphor Icons for success, error, warning, info & loading icons.

🚀 Getting Started

!IMPORTANT This library requires React v18 or higher.

1. Install the library:

# Using npm:
npm install @pheralb/toast

# Using pnpm:
pnpm add @pheralb/toast

# Using yarn:
yarn install @pheralb/toast

2. Add the toast provider:

// 📃 root.tsx

import { Toaster } from "@pheralb/toast";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
    <Toaster />
  </React.StrictMode>,
);

3. Usage:

// 📃 index.tsx

import { toast } from "@pheralb/toast";

export default function Index() {
  return (
    <>
      <button
        onClick={() =>
          toast.success({
            text: "pheralb/toast",
            description: "✨ A beautiful toast library for React",
          })
        }
      >
        <span>Render a toast</span>
      </button>
    </>
  );
}

!TIP 📚 Visit the Documentation for more information.

🔭 Roadmap

• 🚗 Add .loading variant.
• 📚 Add support for Astro + React.
• ✨ Export bundled & minified .css file.
• 🎨 Add support to customize the default styles for greater flexibility and adaptability.

🤝 Contributing

pheralb/toast is a monorepo built with Turbo and it uses:

• Website: Next.js 15 + Content-Collections + MDX + shadcn/ui + Lucide + React-Symbols.
• Library: React 19 with tsup + Lightning CSS + Vitest for testing.

1. Click here to fork the repository.

2. Install dependencies:

# Install pnpm globally if you don't have it:
npm install -g pnpm

# and install dependencies:
pnpm install

3. Commands:

# Run only documentation website:
pnpm dev:docs

# Run all website + packages:
pnpm dev

# Build the docs & library:
pnpm build

# Test the library:
pnpm test

🧑‍🚀 Open http://localhost:3000 to view the Next.js documentation website.

and create a pull request with your features or fixes 🚀✨.

📃 License

MIT License - pheralb 2024.