React Smooth Toast

All in one light weight toast notification library for React built with TypeScript. This library provides an easy-to-use API for displaying toast notifications with customizable icons, styles, positions, and animations.

Changelog Version 1.0.24 👌

Note: No Breaking Changes

• Enhanced Progress Bar variant to have different color based on the type of the toast.

• Added pauseOnHover prop to the ToastContainer component to pause the toast countdown when hovering over the toast.

• Added groupId and groupCount props to the ToastContainer component to control the behavior of grouped toasts. Now you can control how many toasts will be shown in the group. It will have a info tooltip on hover to show the total number of toasts in the group.

• Added SpinnerIcon to the Toast component to show a loading spinner when the toast is pending.

Features

• Multiple Toast Types: Supports success, error, info, and warning toasts.
• Multiple Toast Variants: Supports minimal, material , modern, progress , rounded , glassmorphism, dark, gradient and more variants coming soon.
• Multiple Toast Positions: Supports top-left, top-right, bottom-left, bottom-right, top-center, bottom-center.
• Customizable: Easily customize icons, class names, styles, and positions.
• Animations: Built-in smooth entry and exit animations with pure CSS options.
• Responsive: Toasts are positioned correctly on different screen sizes.
• Easy Integration: Simple setup with context and hooks.

Installation

Install the library using npm:

1npm install react-smooth-toast

Playground

Toast Demo Playground

Demo gif

Getting Started

1. Wrap Your Application with the ToastProvider

To use the toast notifications, wrap your application with the ToastProvider from the library.

1// src/index.tsx or src/main.tsx
2import React from 'react';
3import ReactDOM from 'react-dom/client';
4import App from './App';
5import { ToastProvider } from 'react-smooth-toast';
6import 'react-smooth-toast/style.css';
7
8ReactDOM.createRoot(document.getElementById('root')!).render(
9  <React.StrictMode>
10    <ToastProvider>
11      <App />
12    </ToastProvider>
13  </React.StrictMode>
14);

2. Add the ToastContainer to Your Application

Include the ToastContainer component to render the toasts in your UI. You can set the position of the container.

1// src/App.tsx
2import React from 'react';
3import ToastContainer from 'react-smooth-toast';
4import useToast from 'react-smooth-toast';
5
6const App: React.FC = () => {
7  const toast = useToast();
8
9  const showToast = () => {
10    toast.success('This is a success message!', { duration: 4000 });
11    toast.error('This is an error message!', { icon: '❌' });
12    toast.info('This is an info message!', { className: 'custom-class' });
13    toast.warning('This is a warning message!', { style: { backgroundColor: 'orange' } });
14  };
15
16  return (
17    <div>
18      <button onClick={showToast}>Show Toasts</button>
19      <ToastContainer position="top-right" variant="minimal"/>
20    </div>
21  );
22};
23
24export default App;

API

ToastProvider

Wraps your application and provides context for the toast notifications.

ToastContainer

A component that renders the list of toasts.

Props:

• position: (optional) Defines the position of the toast container. Options are 'top-left', 'top-right', 'bottom-left', 'bottom-right'. Default is 'top-right'.

useToast()

A custom hook that provides functions to trigger toasts of various types.

Methods:

• success(message: string, options?: ToastOptions): Displays a success toast.
• error(message: string, options?: ToastOptions): Displays an error toast.
• info(message: string, options?: ToastOptions): Displays an info toast.
• warning(message: string, options?: ToastOptions): Displays a warning toast.

ToastOptions

Options for customizing toasts.

• id: (optional) Unique identifier for the toast.
• type: 'success' | 'error' | 'info' | 'warning'.
• message: The message to be displayed in the toast.
• icon: (optional) A React node to display as an icon.
• duration: (optional) Duration in milliseconds before the toast is dismissed. Default is 3000ms.
• style: (optional) Inline styles for the toast.
• className: (optional) Custom class name for additional styling.

Customization

Icons and Styles

Customize icons and styles for individual toasts:

1toast.success('Success!', {
2  icon: <YourCustomIcon />,
3  style: { backgroundColor: 'green' },
4  className: 'my-custom-class'
5});

Positions

Position the toast container anywhere on the screen using the position prop:

1<ToastContainer position="bottom-left" variant="minimal"/>

Example

Here's a quick example of using the toast notifications in your app:

1import React from 'react';
2import ToastContainer from 'react-smooth-toast';
3import useToast from 'react-smooth-toast';
4
5const App: React.FC = () => {
6  const toast = useToast();
7
8  return (
9    <div>
10      <button onClick={() => toast.success('Operation successful!')}>Success</button>
11      <button onClick={() => toast.error('Something went wrong!')}>Error</button>
12      <button onClick={() => toast.info('Here is some information.')}>Info</button>
13      <button onClick={() => toast.warning('Warning! Be careful.')}>Warning</button>
14      <ToastContainer position="top-right" variant="material"/>
15    </div>
16  );
17};
18
19export default App;

Roadmap 🛣️

• Add more variants
• Add more animations
• Add more positions
• Add more options
• Reduce bundle size

Contribution

Contributions, issues, and feature requests are welcome! Feel free to check the issues page if you want to contribute.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

---

Feel free to use and modify this library to fit your needs! Happy coding! 🚀