sanjayc208
✨ React Fox Toast✨
Lightweight and customizable toast/notification component for React and Next.js
Preview
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-toastUsage
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>;
}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!