Skip to content

m2na7/react-compact-toast

Repository files navigation

Shizue Logo

React Compact Toast

npm npm downloads license: MIT codecov

Compact, easy-to-use toast notifications for React

✨ Features

  • πŸͺΆ Lightweight: ~2.7KB 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.

About

Compact, easy-to-use toast notifications for React 🍞

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published