React-fox-toast NPM

🌏 Website | 📚 Documentation | 🗄️ Github

React Fox Toast - Flexible Toast Notifications for React and Next.js

react-fox-toast is a lightweight and customizable toast/notification component for React and Next.js. It supports various customization options and integrates seamlessly with libraries like TailwindCSS.

NOTE: Works only on the client side. For SSR frameworks like Next.js, include 'use client'; at the top of your component.

Features

Customizable: Adjust position, duration, content, icons, and more.
Promise Support: Display success/error messages based on promise results.
Custom Content: Render components inside toasts.
Global Toast Container: Manage toasts globally.
TailwindCSS Support: Easy styling with TailwindCSS.
Pause on Hover: Auto-dismiss timer pauses on hover.
Expandable Toasts: Click to reveal more content.
Global Theme Support: Apply consistent styling across toasts.
Lightweight: Minimal performance impact.
Smooth Transitions: Includes expand, slide-in, and slide-out animations.

Installation

npm install react-fox-toast
# or
yarn add react-fox-toast
# or
pnpm add react-fox-toast

Usage

1. Add `ToastContainer`

Wrap your root component with ToastContainer to enable toasts.

'use client'; // Add if using Next.js
import { ToastContainer } from "react-fox-toast";

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

export default App;

2. Use the `toast` Hook

Call toast functions like toast.success() in your components.

'use client'; // Add if using Next.js
import { toast } from "react-fox-toast";

function MyComponent() {
  const showToast = () => {
    toast.success("Success! The action was completed.");
  };

  return <button onClick={showToast}>Show Success Toast</button>;
}