An accessible toast library for React.

Documentation   ✦   Getting Started   ✦   Contribute   ✦   Roadmap   ✦   License

🪐 Features

• 🍂 Lightweight.
• ✅ Accessible.
• 🎨 Light/dark 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.
• 🎨 Add rich colors support.

🤝 Contributing

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

• Docs: Astro Content Collections, shadcn/ui + Tailwind CSS & MDX.
• Library: React 18 with tsup + Vitest for testing.
• Examples: Frameworks to test the library.

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 packages with examples:
pnpm dev

# Build the docs & library:
pnpm build

# Test the library:
pnpm test

• 🧑‍🚀 Open http://localhost:4321 to view the Astro documentation website.
• 🔎 Open http://localhost:3000 to view the Next.js playground. Only for test the functionality of the library.

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

📃 License

MIT License - pheralb 2024.