React Modal Component

Un composant modal réutilisable et personnalisable pour vos applications React, conçu pour être flexible et facilement intégrable. Ce composant prend en charge les interactions via clavier, les clics sur l’overlay, et permet de personnaliser le bouton de fermeture ainsi que les animations.

Fonctionnalités

• Fermeture via la touche Échap : Activez la fermeture avec la touche Escape.
• Clic sur l’overlay : Permet ou non la fermeture de la modale en cliquant à l'extérieur.
• Bouton de fermeture personnalisable : Texte ou nœud React (icône SVG, image, etc.).
• Animations d’ouverture et de fermeture : Ajoutez vos propres classes d’animation CSS.
• Classes personnalisées : Appliquez vos classes CSS à l’overlay, à la modale, et au bouton.

Installation

npm install @clodr/oc-cdr-react-modal

node version : v18.16.1

Utilisation de base

import Modal from "@cdr-oc/react-modal";

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

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Ouvrir la modale</button>
      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
      >
        <h2>Ma modale</h2>
        <p>Ceci est une modale simple avec fermeture manuelle.</p>
      </Modal>
    </>
  );
};
export default App;

Props disponibles

| Prop | Type | Default | Description | |-------------------------|-------------------------------------------|-------------|-----------------------------------------------------------------------------| | isOpen | boolean | false | Contrôle l’état ouvert/fermé de la modale. | | onClose | function | - | Fonction déclenchée lors de la fermeture de la modale. | | children | node | null | Contenu à afficher à l’intérieur de la modale. | | showClose | boolean | true | Affiche ou non le bouton de fermeture. | | closeOnEsc | boolean | false | Active la fermeture via la touche Escape. | | closeOnOverlayClick | boolean | false | Active la fermeture en cliquant sur l’overlay. | | closeText | string \| node | "×" | Contenu du bouton de fermeture (texte, icône, etc.). | | closeBtn | string | "" | Classes CSS supplémentaires pour le bouton de fermeture. | | modalClass | string | "" | Classes CSS supplémentaires pour la modale (conteneur). | | modalOverlayClass | string | "" | Classes CSS supplémentaires pour l’overlay. | | animationOpen | string | "fadeIn" | Classe d’animation appliquée à l’ouverture. | | animationClose | string | "fadeOut" | Classe d’animation appliquée à la fermeture. |

Classes CSS

| Classe CSS | Description | |-----------------------|------------------------------------------------| | modal-overlay | Overlay de fond. | | modal-class | Conteneur principal de la modale. | | close-class | Bouton de fermeture dans la modale. | | fadeIn / fadeOut | Animations par défaut pour l’ouverture/fermeture. |

--Exemple avancé svg voir css--

import Modal from "cdr-react-modal"
import { useState } from "react";


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

  const handleOpen = () => {
    setIsModalOpen(true);
  };


  return (
    <div>
      <h1>Test Modal</h1>
      <button onClick={() => handleOpen()}>Ouvrir la modale</button>
      <Modal
        showClose={true}
        onClose={() => {
          setIsModalOpen(false);
        }}
        isOpen={isModalOpen}
        closeOnEsc ={false}
        closeOnOverlayClick ={false}
        closeBtn={"close-img"}
        animationOpen="fromLeft"
        animationClose="toTop"
        closeText= {null}
      >
        <h2>Modal</h2>
        <p>Un composant modal réutilisable et personnalisable pour les applications React, conçu dans un souci de flexibilité. Ce composant prend en charge les interactions au clavier et en superposition, l&apos; ajout de vos classes , la modification du bouton ou encore les animations.</p>
        <button onClick={() => setIsModalOpen(false)}>Fermer</button>
      </Modal>
    </div>
  );
};

export default TestModal;

🎨 Animations disponibles

Vous pouvez appliquer différentes animations à la modale en passant la classe correspondante. Voici les animations disponibles :

✨ Fondu (Fading)

• fadeIn : Apparition avec un effet de fondu.
• fadeOut : Disparition avec un effet de fondu.

🔍 Zoom (Scale)

• scaleIn : Apparition avec un effet de zoom avant (de scale(0) à scale(1)).
• scaleOut : Disparition avec un effet de zoom arrière (de scale(1) à scale(0)).

➡️ Glissement (Slide)

• fromTop : Apparition en glissant depuis le haut.
• toTop : Disparition en glissant vers le haut.
• fromBottom : Apparition en glissant depuis le bas.
• toBottom : Disparition en glissant vers le bas.
• fromLeft : Apparition en glissant depuis la gauche.
• toLeft : Disparition en glissant vers la gauche.
• fromRight : Apparition en glissant depuis la droite.
• toRight : Disparition en glissant vers la droite.

🔄 Rotation

• rotationRight : Apparition avec une rotation horaire de 0° à 180°.
• rotationLeft : Apparition avec une rotation anti-horaire de 180° à 0°.
• rotationOutRight : Disparition avec une rotation horaire de 90°.
• rotationOutLeft : Disparition avec une rotation anti-horaire de -90°.

⚠️ Notes importantes :

• Ces classes doivent être ajoutées directement sur la modale en fonction de l'animation désirée ex: animationOpen="fromLeft" ou animationClose="toTop".

Licence

Ce projet est sous licence MIT.