A minimalist toast notification system for React. Alerta provides a simple and elegant way to display toast notifications, ensuring users are informed of events and actions in your application.
- 🚀 Lightweight and easy to integrate
- 🎨 Supports different types of notifications: success, error, info, and warning
- ⚙️ Customizable options for each toast (title, duration, callbacks)
- ⏰ Automatic dismissal with optional visual timer
- 📱 Responsive design with mobile support
- 🎯 Simple API for adding and removing toasts
- 🔄 Expandable toasts for long messages
- 🎭 Smooth animations and hover interactions
To install Alerta, you can use npm or yarn:
# With npm
npm install alertajs
# With yarn
yarn add alertajsImport the ToastBox component in your app component and specify the position for the toasts to be displayed:
import{alerta,ToastBox}from"alertajs";// App.tsximportReactfrom'react';import{alerta,ToastBox}from"alertajs";constApp: React.FC=()=>{return(<div><h1>Your App</h1>{/* Other components */}<ToastBoxposition="top-right"/></div>);};exportdefaultApp;You can use the Alerta methods in your components to show different types of notifications. Each method accepts a message and optional customization options:
importReactfrom'react';import{alerta,ToastBox}from"alertajs";constSomeComponent: React.FC=()=>{constshowSuccessToast=()=>{alerta.success('Operation completed successfully!',{title: 'Success',duration: 3000,});};constshowErrorToast=()=>{alerta.error('Something went wrong.',{title: 'Error',duration: 5000,});};constshowInfoToast=()=>{alerta.info('Here is some information.',{title: 'Info',duration: 4000,});};constshowWarningToast=()=>{alerta.warning('Please be careful.',{title: 'Warning',duration: 6000,});};return(<div><buttononClick={showSuccessToast}>Show Success Toast</button><buttononClick={showErrorToast}>Show Error Toast</button><buttononClick={showInfoToast}>Show Info Toast</button><buttononClick={showWarningToast}>Show Warning Toast</button></div>);};exportdefaultSomeComponent;The ToastBox component accepts the following props:
<ToastBoxposition="top-right"// "top-left" | "top-right" | "bottom-left" | "bottom-right"showTimer={true}// Optional: Show visual timer (default: false)/>success(message: string, options?: Partial<ToastOptions>): Displays a success toast.error(message: string, options?: Partial<ToastOptions>): Displays an error toast.info(message: string, options?: Partial<ToastOptions>): Displays an informational toast.warning(message: string, options?: Partial<ToastOptions>): Displays a warning toast.dismissAll(): Dismisses all active toasts.
interfaceToastOptions{title?: string;// Optional title for the toastduration?: number;// Duration in milliseconds (default: 5000)onClose?: ()=>void;// Optional callback when toast is dismissed}You can customize the appearance of your toasts by adding CSS styles. The library uses semantic class names for easy styling:
.toast {
background: white;
border:1px solid #ccc;
border-radius:4px;
padding:10px;
margin:5px0;
}
.toast.success {
border-left-color:#28a745;
}
.toast.error {
border-left-color:#dc3545;
}
.toast.info {
border-left-color:#17a2b8;
}
.toast.warning {
border-left-color:#ffc107;
}AlertaJs supports all modern browsers and React versions 16.8.0 and above.
MIT License. See LICENSE for details.
If you'd like to contribute to AlertaJs, feel free to fork the repository and submit a pull request!