Modal

Fenêtre modale avec fond d'écran semi-transparent, fermeture au clic sur la croix, sur la touche Échap ou sur l'overlay. Supporte un children classique ou une fonction (requestClose) => ReactNode.

Démo en direct — children statique

Cliquez sur le bouton pour ouvrir une modale avec du contenu simple.

Démo en direct — render prop (requestClose)

Le childrenpeut être une fonction qui reçoit requestClosepour fermer la modale depuis l'intérieur.

Code source complet — copier-coller

Exemple complet avec les deux motifs : children statique et render prop. Copiez-collez dans votre projet.

"use client";

import { useState } from "react";
import { Modal } from "@ramses1er/cbk-toolkit/client";

export default function MaPage() {
  const [open, setOpen] = useState(false);
  const [openForm, setOpenForm] = useState(false);
  const [name, setName] = useState("");

  return (
    <div>
      <button onClick={() => setOpen(true)}>
        Ouvrir la modale
      </button>

      {/* --- children classique --- */}
      <Modal
        title="Informations"
        isOpen={open}
        onClose={() => setOpen(false)}
      >
        <p>Contenu de la modale.</p>
      </Modal>

      {/* --- render prop (requestClose) --- */}
      <button onClick={() => setOpenForm(true)}>
        Ajouter un utilisateur
      </button>

      <Modal
        title="Ajouter un utilisateur"
        isOpen={openForm}
        onClose={() => setOpenForm(false)}
      >
        {(requestClose) => (
          <div>
            <input
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Nom"
            />
            <button onClick={requestClose}>Annuler</button>
            <button onClick={() => { alert(name); requestClose(); }}>
              Enregistrer
            </button>
          </div>
        )}
      </Modal>
    </div>
  );
}

Explication du code

children statique

Passez du JSX normal dans children. La modale l'affiche tel quel. Utilisez ce motif quand le contenu n'a pas besoin de fermer la modale lui-même.

Render prop (requestClose)

Passez une fonction (requestClose) => <JSX /> dans children. Le composant reçoit requestClose pour fermer la modale depuis un bouton interne (Annuler, Enregistrer, etc.).

Props

Prop	Type	Défaut	Description
title	string	requis	Titre affiché dans l'en-tête
isOpen	boolean	requis	Contrôle l'affichage
onClose	() => void	requis	Callback de fermeture
children	ReactNode \| ((requestClose: () => void) => ReactNode)	requis	Contenu ou fonction qui reçoit `requestClose`

Comportement

Si isOpen est false→ ne rend rien (return null)
Rendu dans un createPortal vers document.body
Fond noir semi-transparent avec backdrop-blur
Fermeture possible : clic sur la croix, touche Échap, clic sur l'overlay
body passe en overflow: hidden à l'ouverture pour bloquer le scroll
Hauteur max 85vh avec scroll interne si le contenu déborde