@volvo-cars/react-messages

@volvo-cars/react-messages

React components and hooks for displaying transient toast notifications and persistent inline messages, styled with @volvo-cars/css.

What's included

Toast notifications

• ToastMessage — Renders a single toast notification (success, error, warning, info variants)
• ToastsRenderer — Renders the full list of active toasts managed by a ToastManager
• ToastManager — Imperative manager for creating, queuing, and dismissing toasts programmatically
• useToast — Hook for triggering toast notifications from within a React component
• withViewTransitions — Higher-order helper that enables smooth View Transition animations when toasts enter and exit

Inline messages

• InlineMessage — A contextual feedback message displayed inline within a page or form (success, error, warning, info variants). Pass onClose to make it dismissible.

Installation

yarn add @volvo-cars/react-messages @volvo-cars/react-locale-provider

Example

const { toast } = useToast();

<button onClick={() => toast({ type: 'success', message: 'Saved!' })}>
  Save
</button>

<ToastsRenderer />