A react-hot-toast alternative

react-hot-toast has a small, friendly API, and Ding keeps that feel. The difference is that Ding keeps one toast on screen and morphs it, where react-hot-toast keeps several.

Try it:

Same kind of API

import { toast } from '@yusufceng1z/ding-react';

      toast.success('Saved');
      toast.error('Payment failed');
      toast.promise(save(), { loading: 'Saving…', success: 'Saved', error: 'Failed' });

Render <Toaster /> once near the root, the same way you do today.

What changes

A second call does not add a second toast. The visible one changes into the new message. You can also update a toast yourself with toast.update(id, patch), which makes progress bars and multi-step jobs easy, and sound is available if you want it (off by default).

Ding also ships a Svelte 5 package and a framework-free one, in case you work in more than one stack.

Install

npm i @yusufceng1z/ding-react

Full setup is on the React toast page, and a comparison with a stacking alternative is on the Sonner page.