@byfrimouss/hrnet-modal-react

Composant Modal React accessible et animé — converti depuis le plugin jQuery.modal.js de l'application HRnet WealthHealth.

Installation

npm install @byfrimouss/hrnet-modal-react

Utilisation

import { useState } from "react";
import Modal from "@byfrimouss/hrnet-modal-react";

function App() {
  const [isOpen, setIsOpen] = useState(false);

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

      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Succès !"
        message="L'employé a bien été créé."
      />
    </>
  );
}

Props

Prop	Type	Obligatoire	Défaut	Description
isOpen	boolean	✅	—	Contrôle la visibilité de la modale
onClose	function	✅	—	Appelée pour fermer la modale
title	string	❌	''	Titre affiché en haut
message	string	❌	''	Message principal
children	node	❌	null	Contenu JSX personnalisé

Fonctionnalités

• ✅ Fermeture par clic sur l'overlay
• ✅ Fermeture par touche Escape
• ✅ Blocage du scroll du body quand ouverte
• ✅ Attributs ARIA (accessibilité)
• ✅ Animation CSS (fadeIn + slideUp)
• ✅ Zéro dépendance externe (hors React)

Licence

MIT