Skip to content

Releases

v0.0.3

v0.0.3 Latest
Latest

Choose a tag to compare

View all tags
@YusufCeng1z YusufCeng1z released this 08 Nov 12:41
v0.0.3
b0b1e5b

An accessibility and polish release. No breaking changes. Every item has a live demo on the What's new page.

New

  • Translatable screen reader labels. toast.configure({ labels: { region, dismiss } }) sets the names of the notifications region and the close button. The Toaster in React and Svelte takes a labels prop and mountToaster takes labels. Keys you leave out keep the English default. Thanks to @tcisse for the idea and the implementation (#2, #3).

Improved

  • Buttons keep their look but their click area is now 44px tall.
  • Alt + T now focuses toasts that have no buttons, which also pauses their timer.
  • Esc no longer dismisses toasts while focus is in a dialog, menu or text field.
  • The status icon is centered in the pill, and toasts without buttons have more even padding.

Fixed

  • Dragging a toast no longer highlights its text in Safari.
  • A site-wide button { margin } rule can no longer push the toast buttons off center.

For contributors

  • A fresh clone now installs, type-checks, tests and builds, and CI runs the same steps on every pull request (#1, thanks @tcisse). Running the tests needs Node 22.18 or newer.

Install

npm i @yusufceng1z/ding-react@latest

Contributors

tcisse
Assets 2
Loading

v0.0.2

v0.0.2

Choose a tag to compare

View all tags
@YusufCeng1z YusufCeng1z released this 07 Nov 02:59
v0.0.2
99f308f

First public release of Ding, a toast library with spring physics and no dependencies.

Only one toast is on screen at a time. A new call morphs it in place instead of stacking a second one.

Packages

  • @yusufceng1z/ding-react for React 18+
  • @yusufceng1z/ding-svelte for Svelte 5
  • @yusufceng1z/ding for plain JavaScript

Highlights

  • Spring-based size, shape and text transitions that keep momentum when interrupted
  • Styles injected from JavaScript, no stylesheet to import
  • Light, dark and system themes, six positions, right-to-left support
  • Description, avatar, action buttons, progress bar and trailing text
  • Promise toasts and in-place updates
  • Optional sound per status
  • Live regions, keyboard dismiss and prefers-reduced-motion support
  • Strict TypeScript, ESM and CommonJS builds

Install

npm i @yusufceng1z/ding-react

shadcn/ui users can run npx shadcn@latest add @ding/ding.

Docs and live demos: https://ding.yusufcengiz.dev

Loading