valtio-toast
v1.0.4
Published
A lightweight, type-safe toast notification system using Valtio and Tailwind CSS
Downloads
17
Maintainers
Readme
🎯 valtio-toast
A lightweight, type-safe toast notification system for React applications using Valtio state management and Tailwind CSS.
✨ Features
- 🎯 Built with TypeScript for full type safety
- 🎨 Styled with Tailwind CSS
- 🔄 Valtio state management
- 🎭 Smooth animations
- ♿ Accessible (WAI-ARIA compliant)
- 📱 Responsive design
- 🎛 Customizable duration and positioning
- 🔄 Queue management for multiple toasts
- 🎨 Themeable with custom styles
- 📦 Zero dependencies (except peer dependencies)
📦 Installation
npm install valtio-toast
# or
yarn add valtio-toast
🚀 Quick Start
import { ToastProvider } from 'valtio-toast';
import { useToast } from 'valtio-toast';
import 'valtio-toast/dist/styles.css';
// Wrap your app with ToastProvider
function App() {
return (
<ToastProvider>
<YourApp />
</ToastProvider>
);
}
// Use in any component
function YourComponent() {
const toast = useToast();
const handleClick = () => {
toast.show({
type: 'success',
message: 'Operation successful!',
duration: 5000 // optional, defaults to 5000ms
});
};
return <button onClick={handleClick}>Show Toast</button>;
}
📖 API Reference
ToastProvider Props
| Prop | Type | Default | Description | |------|------|---------|-------------| | position | ToastPosition | 'top-right' | Position of toasts | | maxToasts | number | 5 | Maximum number of toasts shown at once | | children | ReactNode | - | Child components |
useToast Hook
Returns an object with the following methods:
interface ToastMethods {
show: (options: ToastOptions) => string;
success: (message: string, duration?: number) => string;
error: (message: string, duration?: number) => string;
warning: (message: string, duration?: number) => string;
info: (message: string, duration?: number) => string;
remove: (id: string) => void;
removeAll: () => void;
}
Toast Options
interface ToastOptions {
type: 'success' | 'error' | 'warning' | 'info';
message: string;
duration?: number;
position?: ToastPosition;
onClose?: () => void;
}
🎨 Customization
Tailwind Configuration
Add these custom animations to your tailwind.config.js
:
module.exports = {
theme: {
extend: {
keyframes: {
'toast-enter': {
'0%': { transform: 'translateX(100%)', opacity: 0 },
'100%': { transform: 'translateX(0)', opacity: 1 }
},
'toast-exit': {
'0%': { transform: 'translateX(0)', opacity: 1 },
'100%': { transform: 'translateX(100%)', opacity: 0 }
}
},
animation: {
'toast-enter': 'toast-enter 0.3s ease-out',
'toast-exit': 'toast-exit 0.3s ease-in'
}
}
}
};
Custom Themes
import { createTheme } from 'valtio-toast';
const customTheme = createTheme({
success: {
background: 'bg-emerald-50',
border: 'border-emerald-200',
text: 'text-emerald-800'
},
// ... other types
});
<ToastProvider theme={customTheme}>
<App />
</ToastProvider>
🔧 Advanced Usage
Custom Components
import { createToastComponent } from 'valtio-toast';
const CustomToast = createToastComponent(({ message, type }) => (
<div className="custom-toast">
{message}
</div>
));
<ToastProvider component={CustomToast}>
<App />
</ToastProvider>
Queue Management
const toast = useToast();
// Configure queue behavior
toast.configure({
maxToasts: 3,
queueMode: 'replace-oldest'
});
📚 Examples
Basic Usage
const toast = useToast();
// Success toast
toast.success('Profile updated successfully');
// Error toast
toast.error('Failed to save changes');
// Warning toast
toast.warning('Your session will expire soon');
// Info toast
toast.info('New features available');
Custom Duration
toast.show({
type: 'success',
message: 'Quick notification',
duration: 2000 // 2 seconds
});
With Callback
toast.show({
type: 'info',
message: 'Processing...',
onClose: () => {
console.log('Toast closed');
}
});
🤝 Contributing
Contributions are welcome! Please read our Contributing Guide for details.
📄 License
MIT © [Bhanu Pratap Chaudhary]