React Modal Enzo

React Modal Enzo est un composant de modal personnalisable pour React permettant l'ajout de contenu dynamique.

Installation

Pour installer le package via npm, utilisez la commande suivante :

npm install react-modal-enzo

Utilisation

Voici comment utiliser le composant Modal dans votre projet :

Importation

import Modal from 'react-modal-enzo';

Exemple d'utilisation

import React, { useState } from "react";
import Modal from "react-modal-enzo";

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

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      <Modal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        clickOutsideClose={true}
        disableEscClose={false}
        content={{
          title: "Welcome",
          message: "This is a customizable modal.",
          buttonText: "Close",
        }}
        customClass="my-custom-class"
        style={{ backgroundColor: "#fff" }}
      />
    </div>
  );
};

export default App;

Propriétés du composant

| Propriété | Type | Obligatoire | Par défaut | Description | | ------------------- | ------------------ | ----------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | | isOpen | boolean | Oui | — | Contrôle si la modal est ouverte ou fermée. | | onClose | function | Oui | — | Fonction appelée pour fermer la modal. | | children | ReactNode | Non | — | Contenu additionnel à afficher dans la modal. | | clickOutsideClose | boolean | Non | true | Permet de fermer la modal en cliquant à l'extérieur. | | closeExisting | boolean | Non | true | Ferme d'autres modales ouvertes lorsque celle-ci s'ouvre. | | disableEscClose | boolean | Non | false | Désactive la fermeture de la modal avec la touche Échap. | | closeTriggers | array of strings | Non | [] | Sélecteurs CSS pour les éléments qui déclenchent la fermeture de la modal. | | content | object | Non | { title: "Default Title", message: "Default message content.", buttonText: "Close" } | Contenu textuel par défaut de la modal. | | customClass | string | Non | "" | Classe CSS personnalisée pour la modal. | | style | object | Non | {} |

Personnalisation du style

Pour personnaliser davantage la modal, vous pouvez ajouter votre propre CSS en utilisant la prop customClass pour cibler les éléments de la modal.

.my-custom-class {
  border-radius: 10px;
  padding: 30px;
}

Contribution

Les contributions sont les bienvenues. Veuillez ouvrir une issue pour discuter de vos idées ou soumettre une pull request.