✨ React Fox Toast✨

Lightweight and customizable toast/notification component for React and Next.js

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

1npm install react-fox-toast
2# or
3yarn add react-fox-toast
4# or
5pnpm add react-fox-toast

Usage

1. Add ToastContainer

Wrap your root component with ToastContainer to enable toasts.

1'use client'; // Add if using Next.js
2import { ToastContainer } from 'react-fox-toast';
3
4function App() {
5  return (
6    <div>
7      <ToastContainer />
8    </div>
9  );
10}
11
12export default App;

2. Use the toast Hook

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

1'use client'; // Add if using Next.js
2import { toast } from 'react-fox-toast';
3
4function MyComponent() {
5  const showToast = () => {
6    toast.success('Success! The action was completed.');
7  };
8
9  return <button onClick={showToast}>Show Success Toast</button>;
10}

Learn More

• Detailed usage and examples are available in the Documentation.

License

MIT License

For questions or feedback, open an issue or contribute on GitHub!