React toast notifications

Ding is a React toast library with no dependencies and no stylesheet. You render one component and call a function. This page covers the setup and the parts people usually ask about next.

Install

One package, nothing else to add.

npm i @yusufceng1z/ding-react

Render the Toaster once

Put it near the root of the app. The styles are injected from JavaScript, so there is no CSS file to import.

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

      export default function App() {
        return (
          <>
            <Toaster position="top-center" theme="system" />
            {/* your app */}
          </>
        );
      }

Call toast from anywhere

toast is a plain function, so it works in event handlers, effects, data-fetching code and anything else that is not a component.

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

      toast.success('Saved');
      toast.error('Payment failed', { description: 'Card declined' });

Only one toast is on screen. If you call toast again while one is showing, the toast on screen changes into the new message. Calling it with the same message twice adds a counter (×2) instead of a second toast.

Saving, loading and undo

For a request, pass the promise and one toast goes from loading to the result. The loading toast page has the details.

toast.promise(save(), {
        loading: 'Saving…',
        success: 'Saved',
        error: (err) => `Could not save: ${err.message}`,
      });

An action button can return a patch, which is how undo toasts confirm that the undo worked.

Next.js and shadcn/ui

Toaster uses hooks, so in the App Router it has to live in a client component. The Next.js setup shows the layout. If the project uses shadcn/ui, there is also a one-command install.

Timing

Plain toasts close after 5 seconds. Errors, loading toasts and toasts with a button stay until the user dismisses them, because those are the ones people must not miss. Hovering or focusing a toast pauses the timer.

I wrote Ding because I wanted a toast that does not pile up. If that sounds like what you need, a star on GitHub helps others find it.