YusufCeng1z/ding

Overview

Ding is a toast notification library where only one toast is shown at a time: a new call morphs the existing toast in place instead of stacking messages. Size, shape and text are driven by a spring solver, so interrupting an animation preserves momentum. It ships three packages that share a core and render separately: @yusufceng1z/ding for plain DOM, @yusufceng1z/ding-react for React 18+ and @yusufceng1z/ding-svelte for Svelte 5. The core handles springs, timers, the store, sound and the DOM renderer; the framework packages only render package layout.

It is aimed at developers who want a compact notification component with motion and accessibility built in, without importing a stylesheet or other dependencies. Rich content covers descriptions, avatars, action buttons, progress bars, countdown lines and trailing meta text. Light, dark and system themes, six screen positions, right-to-left support and optional sounds are configured through one API feature overview.

Install and quick start

Install only the package for your framework; each depends on the small core install section:

npm i @yusufceng1z/ding-react    # React 18+
npm i @yusufceng1z/ding-svelte   # Svelte 5
npm i @yusufceng1z/ding          # plain DOM

Render the toaster once, then call toast from anywhere. A React example quick start:

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

export default function App() {
  return (
    <>
      <Toaster position="top-center" theme="system" />
      <button onClick={() => toast.success('Saved')}>Save</button>
    </>
  );
}

For Svelte 5 and plain DOM, the README gives equivalent snippets: <Toaster /> plus toast.success(...), or mountToaster({ position: 'top-center' }) before calling toast Svelte example DOM example. If you use shadcn/ui, the registry command npx shadcn@latest add @ding/ding adds the React package and a ding-toaster.tsx wrapper shadcn installation.

Status helpers include toast.success, error, warning, info and loading, all returning a toast id. toast.promise maps loading/success/error states, and toast.update(id, patch) changes a toast in place. An action button can return a patch so the toast morphs instead of closing, which supports flows like undo promises and updates actions.

Configuration and behavior

toast.configure sets position, theme, sound and volume, and toast.dismiss(id) or toast.dismiss() closes one or all toasts configure section. Duration defaults to 5000 ms; 0 keeps a toast until dismissed. Errors, loading toasts and toasts with buttons persist, hover and keyboard focus pause the timer, and repeating the same toast adds a counter such as ×2 options table.

Sound is off by default. With sound: true each status has its own built-in tone, or you can provide a function that receives the status; browsers keep audio locked until a user click or key press sound section. Accessibility features include persistent live regions (errors assertive, others polite), Esc to dismiss, Alt + T to move focus into the toast, prefers-reduced-motion support and automatic mirroring on RTL pages accessibility.

Styles are injected from JavaScript, so there is no stylesheet to import. Both ESM and CommonJS builds are published and the codebase is written in strict TypeScript.

Constraints

React support requires React 18 or newer, and the Svelte package targets Svelte 5. Because one toast replaces another, the library is not suited to designs that need multiple simultaneous messages. Sound depends on a prior user interaction in the browser. The repository is MIT licensed license and documents local development with pnpm install, pnpm test, pnpm typecheck and pnpm build development. A live demo and docs site is available at ding.yusufcengiz.dev.

HotRepo's take

Ding entered HotRepo's new-project board in the TypeScript list on 2026-11-07, with 102 stars and 2 forks and a reported gain of 2 stars in a roughly one-hour window that day. That is a single early snapshot, so it supports only the fact that the project appeared on the board, not a judgment about momentum. The concrete differentiator visible in the source is the one-toast morphing model backed by a spring solver and split core/framework packages, which is worth evaluating against your own interaction requirements rather than star count.