Sonner for Pure JS

An opinionated toast component for Pure JS.

Based on huanfe1/sonner-js and emilkowalski/sonner

Usage

To start using the library, install it in your project:

npm install @numer/sonner

Then import it and use it directly.

import toast from '@numer/sonner';

toast('My first toast');

UMD

You can use plain <script> to import @numer/sonner from CDNs, like:

<script src="https://cdn.jsdelivr.net/npm/@numer/sonner/dist/umd/index.min.js"></script>

Then you can use it from a global sonnerJS variable:

<script>
    sonnerJS('My first toast');
    // or
    const sonner = sonnerJS;
    sonner('My first toast');
</script>

ESM

You can use <script type="module"> to import @numer/sonner from CDNs, like:

<script type="module">
    import toast from 'https://cdn.jsdelivr.net/npm/@numer/sonner/+esm';
    toast('My first toast');
</script>

Types

Default

toast('Event has been created');

With custom description:

toast('Event has been created', {
    description: 'This is a description',
});

Success

toast.success('Event has been created');

Error

toast.error('Event has not been created');

Info

toast.info('Be at the area 10 minutes before the event time');

Warning

toast.warning('Be at the area 10 minutes before the event time');

Action

toast('Event has been created', {
    action: {
        label: 'Action',
        onClick: () => console.log('Action!'),
    },
});

With cancel button:

toast('Event has been created', {
    action: {
        label: 'Cancel',
        onClick: () => console.log('Cancel!'),
        cancel: true,
    },
});

Promise

const promise = () => new Promise(resolve => {
    setTimeout(() => resolve({ name: 'Sonner' }), 2000);
});
toast.promise(promise, {
    loading: 'Loading...',
    success: data => {
        return `${data.name} toast has been added`;
    },
    error: 'Error',
});

Others

Update toasts

You can update existing toast by passing the toast id:

const id = toast('Toast has been updated');

toast.success('Toast has been updated', {
    id: toastId,
});

Dismiss toasts

You can dismiss toast by use toast.dismiss()

const toastId = toast('Event has been created');

toast.dismiss(toastId);

You can also dismiss all toasts by without an id.

toast.dismiss();

Permanent toasts

If you want a toast to never disappear, you can set the duration to 0.

toast('Event has been created', {
    duration: 0,
});

License

MIT Licensed.