Quick Start

This page gets a working toast stack on screen with the minimum mental overhead.

npm install @ilokesto/toast

1. Mount a Toaster

toast.* calls only work when a runtime has been registered. In practice that means you must mount a <Toaster />.

import { Toaster } from '@ilokesto/toast';

function App() {
  return <Toaster />;
}

2. Call the facade

import { toast } from '@ilokesto/toast';

toast.success('Saved successfully');

That is enough to show a toast in the default runtime.

3. Use other built-in variants

toast('Hello');
toast.error('Something went wrong');
toast.loading('Saving...');

toast.loading() uses infinite duration until something else updates or dismisses it.

4. Promise toasts stay close to the common path

toast.promise(fetch('/api/save'), {
  loading: 'Saving…',
  success: 'Saved',
  error: 'Failed',
});

The same toast id is reused across loading -> success/error transitions.

What to read next

• Read Mental Model if you want to understand the runtime registry and toasterId.
• Read Toaster if you want to control position, limit, transport, or rendering.
• Read Patterns if your next step is promise flows, custom rows, or multiple toasters.