JavaScript toast notifications without a framework

The core of Ding does not need React or Svelte. If you have a plain JavaScript page, a Vue app, or any other setup, you can use the core package directly.

Try it:

Install

npm i @yusufceng1z/ding

Mount and show

import { mountToaster, toast } from '@yusufceng1z/ding';

      const unmount = mountToaster({ position: 'top-center' });

      toast.success('Saved');
      toast.error('Payment failed', { description: 'Card declined' });

mountToaster returns a function that removes the toaster again, useful if the page is torn down or the toaster should only exist on some routes.

Updating a long task

toast.loading returns an id. Pass it to toast.update to move the same toast through progress and into a result.

const id = toast.loading('Uploading photo…', { progress: 0 });
      toast.update(id, { progress: 0.6 });
      toast.update(id, { type: 'success', title: 'Photo uploaded', progress: null });

Options

Position and theme are set on mountToaster or later with toast.configure({ position, theme }). The full list of options is in the docs.

If you do use React or Svelte, the framework packages are thin wrappers over this one. See React or Svelte. The code is on GitHub.