React Compact Toast

zip

Compact, easy-to-use toast notifications for React

🍞 WebSite

✨ Features

🪶 Lightweight: ≈2KB gzipped
🎯 Zero dependencies: No external dependencies
🎨 Fully customizable: Style with any CSS framework (Tailwind, Emotion, etc.)
⚡ Fast: Optimized for performance
🔧 TypeScript: Full TypeScript support
🎭 Flexible: Custom icons, colors, and animations

📦 Installation

# npm
npm install react-compact-toast

# yarn
yarn add react-compact-toast

# pnpm
pnpm add react-compact-toast

🚀 Quick Start

import { ToastContainer, toast } from 'react-compact-toast';

function App() {
  return (
    <div>
      <ToastContainer />
      <button
        onClick={() => toast({ text: 'Hello World!', position: 'topRight' })}
      >
        Show Toast
      </button>
    </div>
  );
}

📖 Basic Usage

1. Add ToastContainer

Add the ToastContainer component to your app (usually in your main App component):

import { ToastContainer } from 'react-compact-toast';

function App() {
  return (
    <div>
      {/* Your app content */}
      <ToastContainer />
    </div>
  );
}

2. Show Toasts

import { toast } from 'react-compact-toast';

// Simple toast
toast('Hello World!');

// Toast with options
toast({
  text: 'Custom notification',
  position: 'topRight',
  autoClose: 5000,
  icon: '🎉',
});

Documentation

Find the full API reference on documentation.