uu0-modal-react-component
v1.0.7
Published
A customizable modal component for React applications
Readme
📦 Modal React Component
voir le package sur NPM : uu0-modal-react-component
description
Ce package fournit un composant de modale personnalisable pour les projets React. Il permet d’afficher une fenêtre modale centrée, avec un overlay et des options de fermeture au clic ou via la touche Escape. Le composant utilise ReactDOM.createPortal pour sortir du flux DOM normal, garantissant une superposition correcte sur le reste de l’interface.
✅ prérequis
Avant d’utiliser ce composant, assurez-vous d’avoir les prérequis suivants :
Node.js : version 16.x ou supérieure recommandée
React : version 17.x ou 18.x
Éditeur de code recommandé : Visual Studio Code
Navigateur compatible : les dernières versions de Chrome, Firefox, Safari, Edge
installation
Installez le composant avec :
yarn add uu0-modal-react-component
⚙️ utilisation de base
Voici un exemple d’intégration du composant dans une application React :
App.js
import React, { useState } from 'react'
import Modal from 'uu0-modal-react-component'
function App() {
const [isModalOpen, setIsModalOpen] = useState(false)
return (
<div>
<button onClick={() => setIsModalOpen(true)}>ouvrir la modale</button>
<Modal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
title="titre personnalisé"
text="contenu personnalisé de la modale."
escapeClose={true}
clickClose={true}
/>
</div>
)
}index.html
<body>
<div id="portal"></div>
</body>🧩 props disponibles
| prop | type | par défaut | description |
| ------------- | ----------------- | ---------- | -------------------------------------------------------------- |
| isOpen | boolean | – | détermine si la modale est visible. |
| onClose | function | – | fonction appelée à la fermeture (clic, touche Escape, etc.). |
| title | string | – | titre affiché en haut de la modale. |
| text | string ou JSX | – | contenu du corps de la modale. |
| escapeClose | boolean | true | active la fermeture avec la touche Escape. |
| clickClose | boolean | true | active la fermeture en cliquant sur l’overlay. |
| isError | boolean | false | affiche le titre en rouge si true, bleu sinon. |
fonctionnalités
✅ animations fluides d’apparition/disparition
✅ fermeture par clic ou touche Escape
✅ affichage conditionnel via la prop isOpen
✅ rendu via ReactDOM.createPortal
✅ overlay sombre en fond
✅ contenu centré à l’écran
✅ titre et texte personnalisables
✅ blocage du scroll de l’arrière-plan
fonctionnalités non implémentées
Certaines fonctionnalités du plugin jQuery d’origine n’ont pas été réécrites, conformément aux objectifs du projet :
chargement de contenu AJAX
❌ non inclus, car la logique de données ne fait pas partie des objectifs de cette conversion orientée UI.
stack de modales multiples (modals.push)
❌ non inclus pour conserver le composant simple. La gestion d’un stack de modales se ferait au niveau du state global dans une architecture React plus avancée.
événements personnalisés (modal:open, modal:close)
❌ en React, les événements sont gérés via les props (onClose), rendant ces événements personnalisés inutiles.
ajout automatique de bouton Close
✅ le bouton est intégré de façon explicite, avec un style personnalisable.