React Compact Toast

✨ ~2.7 kB🚀 Zero deps

Compact, easy-to-use toast notifications for React

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

Interactive Demo

💡 Tip: Click buttons to test different toast features and configurations

🎯Features

Multiple positions supported
Fully type-safe API
Auto-close timing
Click to dismiss
Easily style with any CSS framework

📊Stats

Bundle Size~2.7 kB

DependenciesZero

📋Quick Start

📦Installation

Terminal

npm install react-compact-toast

Terminal

yarn add react-compact-toast

Terminal

pnpm add react-compact-toast

🚀Basic Usage

JavaScript

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

function App() {
  return (
    <div>
      <ToastContainer />
      <Component />
    </div>
  );
}

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

⚙️Advanced Options

JavaScript

// 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!