YusufCeng1z/ding

选用指南

AI 根据 README 整理 · 2026/11/6 06:22:02

使用方式

通过 npm 安装对应框架的包，渲染一次 Toaster 后即可在任意位置调用 toast 方法。

查看 README 依据

- **Rich content.** Description, avatar, buttons, progress bar, a countdown line, small trailing text. - **Accessible by default.** Persistent live regions, keyboard dismiss, `prefers-reduced-motion`. - **Optional sound.** A soft built-in tone per status, or plug in your own. - **Strict TypeScript**, ESM and CommonJS builds. ## Install ```bash npm i @yusufceng1z/ding-react # React 18+ npm i @yusufceng1z/ding-svelte # Svelte 5 npm i @yusufceng1z/ding # plain DOM ``` Each framework package depends on the small `@yusufceng1z/ding` core, so you install only one. ## Quick start

Render the toaster once, then call `toast` from anywhere. **React** ```tsx 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> </> ); } ``` **Svelte 5** ```svelte <script> import { Toaster, toast } from '@yusufceng1z/ding-svelte'; </script> <Toaster position="top-center" theme="system" /> <button onclick={() => toast.success('Saved')}>Save</button> ``` **Plain DOM** ```ts

部署要求

React 包需要 React 18+，Svelte 包需要 Svelte 5，原生 DOM 包无框架要求。

查看 README 依据

- **Rich content.** Description, avatar, buttons, progress bar, a countdown line, small trailing text. - **Accessible by default.** Persistent live regions, keyboard dismiss, `prefers-reduced-motion`. - **Optional sound.** A soft built-in tone per status, or plug in your own. - **Strict TypeScript**, ESM and CommonJS builds. ## Install ```bash npm i @yusufceng1z/ding-react # React 18+ npm i @yusufceng1z/ding-svelte # Svelte 5 npm i @yusufceng1z/ding # plain DOM ``` Each framework package depends on the small `@yusufceng1z/ding` core, so you install only one. ## Quick start

已知限制

同一时间只显示一个 toast，新调用会替换当前 toast；仅最新调用者可更新共享 toast。

查看 README 依据

<img src="assets/ding-demo.gif" alt="A progress toast turns into a success toast, then an error toast with a Retry button morphs into a new message" width="660" /> </p> --- ## Why Ding - **One toast at a time.** A new call morphs the toast on screen instead of stacking a second one. - **Real springs.** Size, shape and text move on a spring solver, so interrupting an animation keeps its momentum. - **No stylesheet.** Styles are injected from JavaScript. Nothing to import. - **Light, dark and system themes**, six positions, right-to-left support.

toast.update(id, { progress: 0.6 }); toast.update(id, { type: 'success', title: 'Photo uploaded', progress: null }); ``` Only the newest caller can update the shared toast, so a slow request that finishes late cannot overwrite a newer message. ### Actions An `onClick` may return a patch. The toast then morphs in place instead of closing. ```ts toast.success('Message deleted', { action: { label: 'Undo', onClick: () => { restore(); return { type: 'info', title: 'Restored' }; }, }, }); ``` ## Options | Option | Description | | --- | --- |