1.0.4 • Published 7 months ago
react-custom-toast-notifications v1.0.4
React Custom Toast Notifications
A highly customizable toast notification system for React applications with smooth animations and extensive styling options.
Features ✨
- 🎨 Highly Customizable - Extensive styling options with Tailwind CSS support
- 🚀 Smooth Animations - Polished entrance and exit animations
- 🔧 TypeScript Support - Built with TypeScript for better developer experience
- 📱 Responsive - Works seamlessly across all device sizes
- 🎯 Multiple Positions - 6 different toast positions
- ⚡ Lightweight - Minimal bundle size with zero dependencies
- 🎪 Toast Types - Success, Error, Warning, and Info variants
Installation 📦
npm install react-custom-toast-notifications
# or
yarn add react-custom-toast-notifications
# or
pnpm add react-custom-toast-notifications
Basic Usage 🚀
- Wrap your app with ToastProvider:
import { ToastProvider } from 'react-custom-toast-notifications';
function App() {
return (
<ToastProvider position="top-right">
<YourApp />
</ToastProvider>
);
}
- Use the useToast hook in your components:
import { useToast } from 'react-custom-toast-notifications';
function MyComponent() {
const { addToast } = useToast();
const showNotification = () => {
addToast('Operation successful!', {
type: 'success',
duration: 5000
});
};
return <button onClick={showNotification}>Show Toast</button>;
}
Customization Options ⚙️
Position Options
top-right
(default)top-left
top-center
bottom-right
bottom-left
bottom-center
Toast Types
success
- For successful operationserror
- For error messagesinfo
- For informational messageswarning
- For warning alerts
Configuration Interface
interface ToastOptions {
type?: 'success' | 'error' | 'info' | 'warning';
duration?: number;
showIcon?: boolean;
showCloseButton?: boolean;
className?: string;
icon?: React.ComponentType;
animation?: {
enter?: string;
exit?: string;
duration?: number;
};
onClose?: () => void;
onClick?: () => void;
}
interface ToastProviderProps {
position?: Position;
containerClassName?: string;
maxToasts?: number;
defaultDuration?: number;
containerStyle?: React.CSSProperties;
pauseOnHover?: boolean;
closeOnClick?: boolean;
}
Advanced Usage 🔧
Custom Styling
// Using Tailwind classes
<ToastProvider
position="top-right"
containerClassName="space-y-2 p-4"
>
<YourApp />
</ToastProvider>
// Custom toast styling
addToast('Custom styled toast!', {
className: 'bg-purple-500 text-white font-bold rounded-xl',
showIcon: true,
duration: 3000
});
Custom Icons
import { CustomIcon } from './icons';
addToast('Message with custom icon', {
icon: CustomIcon,
type: 'info'
});
Promise Integration
const { promiseToast } = useToast();
const handleAsyncOperation = async () => {
await promiseToast(
asyncOperation(),
{
loading: 'Processing...',
success: 'Operation completed!',
error: (err) => `Error: ${err.message}`
}
);
};
Animation Customization
<ToastProvider
position="top-right"
animation={{
enter: 'slide-in',
exit: 'fade-out',
duration: 300
}}
>
<YourApp />
</ToastProvider>
Examples 📚
Basic Success Toast
addToast('Successfully saved!', { type: 'success' });
Error Toast with Custom Duration
addToast('Operation failed!', {
type: 'error',
duration: 8000,
showCloseButton: true
});
Info Toast with Custom Icon and Styling
addToast('New update available!', {
type: 'info',
icon: UpdateIcon,
className: 'bg-blue-100 border-l-4 border-blue-500'
});
Browser Support 🌐
- Chrome >= 60
- Firefox >= 60
- Safari >= 12
- Edge >= 79
Contributing 🤝
Contributions are always welcome! Please follow these steps:
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add some amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
License 📄
This project is licensed under the MIT License
Support 💬
- Create an issue on GitHub
- Join our Discord community
- Follow updates on Twitter
Credits 🙏
Developed and maintained by malicious-dev
Changelog 📝
See CHANGELOG.md for details.