Your toast notifications fade. Mine morph.

#react #javascript #webdev #opensource

Most toast libraries do the same thing: a card fades in, sits there, fades out. When the next one arrives, it stacks on top or replaces the old one.

I wanted toasts that feel like one object changing state, so I built Ding, an open source toast library with real spring physics.

What is different

Toasts morph in place. A loading toast turns into success or error without a new card appearing.
Zero dependencies. React, Svelte, Vue and plain JavaScript share the same core.
Accessible by default. Screen reader announcements, Escape to dismiss and Alt+T to focus the toast.

Usage

npm i @yusufceng1z/ding-react

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

<Toaster />

toast.success('Saved');
toast.error('Could not save', {
  description: 'Network failed.',
  action: { label: 'Retry', onClick: () => save() },
});