React Compact Toast

✨ ≈2 kB🚀 Zero deps

Compact, easy-to-use toast notifications for React

⚡ Lightweight • ⚙️ Headless Architecture • 🎯 Intuitive API • ✨ Fully Customizable

Toast Showcase

Experience different notification styles and interactions

Interactive Demo: Click any button to see toast notifications with different styles, positions, and behaviors.

Features

Multiple positioning options
Fully type-safe API
Custom styling support
Works with any CSS framework
Auto-close with custom timing
Click to dismiss

Bundle size~2kB

DependenciesZero

Quick Start

📦Installation

npm install react-compact-toast

yarn add react-compact-toast

pnpm add react-compact-toast

🚀Basic Usage

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

function Component() {
  return (
    <div>
      <button onClick={() => {
        toast({ text: "super easy!", position: "topRight" });
      }}>
        click me
      </button>
      <ToastContainer />
    </div>
  );
}

⚙️Advanced Options

// Custom toast with options
toast({
  text: 'Custom notification',
  icon: <Icon />,
  highlightText: 'Custom',
  highlightColor: '#FF6B6B',
  autoClose: 5000,
  closeOnClick: true,
  position: 'topRight',
  offset: '80px',
  className: 'bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-2xl'
};

// Available positions:
// 'topLeft' | 'topCenter' | 'topRight' |
// 'bottomLeft' | 'bottomCenter' | 'bottomRight'

🎯 Pro Tip: You can fully style your toasts using className — Tailwind, Emotion, Vanilla CSS, or plain CSS — it's all up to you!