All components (204)

AMSET provider

More · AmsetProvider

What it is and when to use it

Everything the library needs around it, in one line: <AmsetProvider>{children}</AmsetProvider>. Inside there are three: the language (LocaleProvider, which decides how dates, numbers and amounts are written and which way the text runs), the notification queue (useNotifications) and the confirmation dialog (useConfirmation).

When to use it

Once, at the very top: in the root layout of Next or around the application.
locale sets the language (es-ES by default) and notifications passes its options to the queue (how many fit, in which corner they appear).
theme and density to set them at startup. Without them nothing is touched: whatever the <html> already has rules (what the theme script set, or the operating system).

When not to

- If the application brings its own confirmation dialog: withoutConfirm, or the pieces separately (LocaleProvider, NotificationProvider, ConfirmProvider). - For routes, global state or an HTTP client: it does not bring them, on purpose. A provider that mounts all that is what stops a library from being used in the project next door. Keyboard: it has none, it is a provider. The notifications and the dialog it mounts bring their own.

Accessibility: the notifications go in a named region ("Notifications"): normal ones are announced with role="status", which waits for the reader to finish, and errors with role="alert", which interrupts. The confirmation dialog answers false if it is closed, with Escape or if the provider is unmounted: the await of whoever asked is never left hanging.

Fine-tuning: it draws nothing of its own. theme writes data-theme on the <html> (and saves it) and density, data-density: on this page they affect the whole preview.

What it looks like

Inside the provider: the language of amounts (1234,50 €), confirmations and alerts.

<AmsetProvider locale="es-ES">
  <App />
</AmsetProvider>

// Y dentro, desde cualquier componente:
const { confirm } = useConfirmation()
const { show } = useNotifications()
if (await confirm({ title: 'Archive order 1042?' })) show({ tone: 'success', title: 'Archived' })

Props

Import it with import { AmsetProvider } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	—
`catalogs`	`Readonly<Record<string, CatalogSource>>`	Whole languages for the application, by BCP-47 tag; see `LocaleProvider`.
`density`	`"compact" \| "comfortable"`	`compact` lowers the height of the controls (30 px instead of 36) for screens with a lot of data. Without it nothing is touched: the `data-density` attribute already on the `<html>` wins.
`locale`	`string`	BCP-47 tag. `es-ES` by default.
`messages`	`MessageOverrides`	Individual texts that take precedence over the library and over `catalogs`.
`notifications`	`Omit<NotificationProviderProps, "children">`	—
`onCatalogError`	`CatalogErrorHandler`	Called if a lazy catalog could not be loaded; see `LocaleProvider`.
`theme`	`ThemePreference`	Theme at start-up. Without it nothing is touched: whatever the script that avoids the flash has already set wins, and failing that, the operating system.
`withoutConfirm`	`boolean`	Removes the confirmation dialog, if the application brings its own.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: