Notifier

What it replaces

Feedback state should not become modal state.

Use Notifier when a product action needs compact, visible feedback without turning every mutation into its own modal state machine. Especially useful for saves, imports, background work, and destructive confirmation.

• Chain a single notice from loading to success or error as async work resolves.
• Track promises, ask async confirmation questions, dismiss individual notices, or clear a queue.
• Configure placement, duration, visible count, theme mode, radius, icons, hover pause, and swipe dismissal.

Quick start

Start with one small integration.

1import { Notifier, notify } from '@remcostoeten/notifier'23export function App() {4  return <Notifier position="bottom-right" />5}67const notice = notify.loading('Saving settings…')8saveSettings().then(() => notice.success('Settings saved'))

Integration shape

A small path from install to product behavior.

1. 01

   Mount once

   Render Notifier near app root.

2. 02

   Start feedback

   Create loading or informational notice at action boundary.

3. 03

   Resolve state

   Promote same notice to success or error after work completes.

API examples

Start with one call. Add the pieces when you need them.

1notify.success('Settings saved')

1const notice = notify.loading('Saving settings…')23saveSettings().then(() => notice.success('Settings saved'))

1notify.promise(saveSettings(), {2  loading: 'Saving settings…',3  success: 'Settings saved',4  error: 'Could not save settings'5})

<Notifier />

Renders notification region and presentation settings.

notify.promise()

Maps a promise to loading, success, and error messages.

notify.confirm()

Awaits a user decision before destructive work continues.