ToastrrThe Coolest Toast Notifications Library Out There
Github
Documentation
npm install toastrr
Get Started
1
Install the package
npm install toastrr
2
Import the Toaster component
import { Toaster } from 'toastrr';

export default function App() {
    return (
        <div>
            <Toaster 
                position="top-right"
                theme="light"
                duration={3000}
                closeButton={true}
            />
            <MyComponent />
            <MyComponent2 />
        </div>
    )
}
3
Start calling the toasts from anywhere in your app
import { toast } from 'toastrr';

function showToast() {
    toast.success('This is a success toast', {
        theme: 'dark',
        duration: 'infinite',
        closeButton: true
    });
}
Note, the configurations passed to the toast function will override the default configurations set in the Toaster component.
Configuration Options
PropRequiredTypePossible ValuesDefault
position
Nostring'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right''top-right'
theme
Nostring'light' | 'dark''light'
duration
Nonumber | 'infinite'any number (ms) or 'infinite'3000
closeButton
Nobooleantrue | falsetrue
Made with ❤️ By Atul Goyal