ErrorDisplay

Bannière d'erreur rouge avec bouton de fermeture. Affiche le message d'une ApiError et se masque au clic sur le bouton.

Démo en direct — bannière dismissible

Cliquez pour afficher une erreur. Cliquez sur X pour la masquer. Une nouvelle erreur ré-affiche automatiquement la bannière (plus besoin de key).

Aucune erreur — la bannière ne rend rien quand error est null.

Le composant réinitialise son état dismissed automatiquement quand error change.

Démo en direct — au-dessus d'un tableau

Pattern fréquent : la bannière apparaît au-dessus du contenu sans le masquer.

Nom	Email
Alice Martin	alice@email.com
Bob Dupont	bob@email.com

Code source complet — copier-coller

Exemple minimal avec gestion d'état et dismiss automatique.

"use client";

import { useState } from "react";
import { ErrorDisplay, ApiError } from "@ramses1er/cbk-toolkit/client";

export default function MaPage() {
  const [error, setError] = useState<ApiError | null>(null);

  const handleFetch = async () => {
    try {
      await fetchData();
    } catch (e) {
      setError(e as ApiError);
    }
  };

  return (
    <div className="space-y-4">
      <button onClick={handleFetch}>Charger les données</button>
      <ErrorDisplay error={error} />
      <Contenu />
    </div>
  );
}

Utilisation — pattern Guard

Le pattern le plus courant : si une erreur est présente, on affiche uniquement la bannière à la place du contenu.

import { ErrorDisplay } from "@ramses1er/cbk-toolkit/client";

function MonComposant() {
  const { data, error } = useGetUsers();

  if (error) {
    return <ErrorDisplay error={error} />;
  }

  return <div>...</div>;
}

Utilisation — pattern Bannière

Pour afficher l'erreur au-dessus du contenu sans le masquer entièrement (utile quand plusieurs requêtes peuvent échouer).

import { ErrorDisplay } from "@ramses1er/cbk-toolkit/client";

function MonComposant() {
  const listA = useGetA();
  const listB = useGetB();

  const queryError = listA.error || listB.error;

  return (
    <div className="space-y-6">
      {queryError && <ErrorDisplay error={queryError} />}
      <Contenu />
    </div>
  );
}

API de référence

Prop	Type	Défaut	Description
error	ApiError \| null	requis	L'erreur à afficher. Si `null`, le composant ne rend rien.

Comportement

Si error est null → ne rend rien
Si l'utilisateur clique sur X → se masque (state interne dismissed)
Quand error change (nouvelle instance), le composant se ré-affiche automatiquement via useEffect — plus besoin de key={error.message}