Provider

Composant client unique qui monte le provider de toasts, le conteneur et l'observateur de thème.

LrvoProvider regroupe le câblage client obligatoire d'une application LRVO en un seul composant. Il évite d'oublier une pièce ou de la monter deux fois.

Ce qu'il monte

<ToastProvider>
  <ThemeWatcher />
  {children}
  <ToastContainer />
</ToastProvider>

Élément	Rôle
`ToastProvider`	Contexte des notifications, requis par `useToast`.
`ThemeWatcher`	Suit `prefers-color-scheme` quand aucune préférence n'est stockée, et applique le thème sur une page rendue côté client, où le script anti-flash ne tourne pas.
`ToastContainer`	Rendu de la pile de toasts, en bas à droite.

Utilisation

Envelopper le contenu du <body> du layout racine, une seule fois.

// app/layout.js
import { LrvoProvider } from '@lrvo/core/features/provider';
import { ThemeStyle } from '@lrvo/core/themes/server';
import '@lrvo/core/styles/core.css';

export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <head>
        <ThemeStyle />
      </head>
      <body>
        <LrvoProvider>{children}</LrvoProvider>
      </body>
    </html>
  );
}

<ThemeStyle /> reste séparé : ses jetons et son script anti-flash doivent s'appliquer dans le <head>, avant le premier rendu, alors que LrvoProvider vit dans le <body>.

Ne pas monter ToastProvider ou ThemeWatcher en plus. Deux providers de toasts donnent deux files indépendantes : les notifications déclenchées depuis un sous-arbre n'apparaîtraient que dans le conteneur de ce sous-arbre.

Le provider est client, le layout reste serveur. LrvoProvider porte la directive 'use client' ; le layout qui l'utilise n'a pas besoin d'en porter une, et ses autres enfants restent des composants serveur.

Import

Ce qu'il monte

Utilisation

Notes

Sur cette page