ocp-plugin-modal

Une modale React réutilisable avec animations et options de personnalisation. Le plugin nécessite l'utilisation du hook {useState} de React.
Utilisation dans le cadre d'un projet OpenClassrooms.

Installation

npm install ocp-plugin-modal ou yarn add ocp-plugin-modal

Utilisation

Une fois le plugin installé, importez-le dans le fichier où vous souhaitez l'utiliser :

    import Modal from 'ocp-plugin-modal';
    import { useState } from 'react';

Pour utiliser le plugin, vous devez créer un state React (useState) pour suivre si la modale est ouverte ou fermée :

    const ExempleModale = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);

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

        <Modal
            isOpen={isModalOpen}           // État de la modale
            onClose={() => setIsModalOpen(false)}  // Fonction pour fermer la modale
        >
            <h2>Ma modale</h2>
        </Modal>
        </>
    );
    };

Explications :

-isOpen reçoit la variable state (true = ouverte, false = fermée).

-onClose doit être une fonction qui met cette variable à false pour fermer la modale.

-Cela permet au plugin de contrôler son affichage en fonction de votre state React.

Styles nécessaires:

Par défaut, le plugin utilise les classes suivantes :

.modal-overlay → fond semi-transparent

.modal-content → conteneur principal de la modale

.modal-close → bouton de fermeture

-Option 1 : Utiliser notre CSS par défaut.

Il suffit d'importer :

import 'ocp-plugin-modal/dist/Modal.css';

Option 2 : Fournir votre propre CSS.

Si vous ne souhaitez pas importer le CSS par défaut, vous devez définir au minimum les animations suivantes pour conserver l’effet fade et scale :

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

@keyframes scaleIn { from { transform: scale(0.9); opacity: 0 } to { transform: scale(1); opacity: 1 } }

@keyframes fadeOut { from { opacity: 1 } to { opacity: 0 } }

@keyframes scaleOut { from { transform: scale(1); opacity: 1 } to { transform: scale(0.9); opacity: 0 } }

Note: Si vous choisissez de modifier les noms de classes avec les props overlayClassName,
modalClassName, closeClass, n'oubliez pas de changer également les noms dans le CSS. Par défaut:

overlayClassName = modal-overlay
modalClassName = modal-content
closeClass = modal-close 

Liste des props:

| Prop              | Type           | Par défaut | Description                                                                 |
|-------------------|----------------|------------|-----------------------------------------------------------------------------|
| isOpen            | boolean        | false      | Contrôle si la modale est ouverte (true) ou fermée (false).                 |
| onClose           | () => void     | undefined  | Fonction appelée pour fermer la modale.                                     |
| children          | ReactNode      | null       | Contenu affiché à l'intérieur de la modale.                                 |
| escapeClose       | boolean        | true       | Permet de fermer la modale avec la touche Échap.                            |
| clickClose        | boolean        | true       | Permet de fermer la modale en cliquant sur le fond.                         |
| showCloseButton   | boolean        | true       | Affiche un bouton de fermeture dans la modale.                              |
| closeButton       | string         | ×          | Texte du bouton de fermeture. Peut être remplacé par un composant custom.   |
| fadeDuration      | number         | 300        | Durée de l’animation d’ouverture/fermeture en millisecondes.                |
| zIndex            | number         | 1000       | Valeur CSS z-index pour la modale et l’overlay.                             |
| overlayClassName  | string         | ''         | Classe CSS supplémentaire pour l’overlay.                                   |
| modalClassName    | string         | ''         | Classe CSS supplémentaire pour la modale.                                   |
| closeClass        | string         | ''         | Classe CSS pour le bouton de fermeture.                                     |
| minWidth          | string         | 300px      | Largeur minimale de la modale.                                              |
| maxWidth          | string         | 500px      | Largeur maximale de la modale.                                              |

Exemple d'utilisation avancée:

<Modal
    isOpen={isModalOpen}                     // État d'ouverture
    onClose={() => setIsModalOpen(false)}     // Fonction pour fermer
    escapeClose={false}                        // Ferme la modale avec Échap
    clickClose={false}                         // Ferme en cliquant sur l'overlay
    showCloseButton={true}                     // Affiche le bouton de fermeture
    closeButton="×"                            // Texte du bouton de fermeture
    fadeDuration={300}                         // Durée de l'animation en ms
    zIndex={2000}                              // z-index pour overlay/modale
    overlayClassName="custom-overlay"          // Classe CSS pour l'overlay
    modalClassName="custom-modal"             // Classe CSS pour la modale
    closeClass="custom-close-btn"             // Classe CSS pour le bouton de fermeture
    minWidth="400px"                           // Largeur minimale
    maxWidth="700px"                           // Largeur maximale
  >
    <h2>Modale avancée</h2>
    <p>Cette modale utilise toutes les props disponibles et montre comment personnaliser le style et le comportement.</p>
  </Modal>

Compatibilité

React 18 ou supérieur.

Licence

Ce projet est sous licence [MIT](https://opensource.org/licenses/MIT).