modal-component-hw

React Modal Component

Un composant de fenêtre modale simple et personnalisable pour les applications React.

Table des matières

• Installation
• Utilisation
• Propriétés
• Exemple
• Styles
• Contribuer
• License

Installation

Pour installer le composant modal dans votre projet React, vous pouvez utiliser npm ou yarn :

npm install react-simple-modal

ou

yarn add react-simple-modal

Utilisation

Pour utiliser le composant Modal dans votre application React, importez-le dans votre fichier et incorporez-le dans votre code JSX.

import React, { useState } from 'react';
import Modal from 'react-simple-modal';

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

    const toggleModal = () => {
        setIsOpen(!isOpen);
    };

    return (
        <div>
            <button onClick={toggleModal}>Open Modal</button>
            <Modal isOpen={isOpen} onClose={toggleModal}>
                <h2>Modal Title</h2>
                <p>This is the content of the modal.</p>
                <button onClick={toggleModal}>Close Modal</button>
            </Modal>
        </div>
    );
};

export default App;

Propriétés

Le composant Modal accepte les propriétés suivantes :

• isOpen (obligatoire) : Un booléen indiquant si la modal doit être affichée ou non.
• onClose (obligatoire) : Une fonction de rappel appelée lorsque la modal doit être fermée.
• children : Les éléments à afficher à l'intérieur de la modal.

Exemple

Vous pouvez trouver un exemple d'utilisation du composant Modal dans le fichier example/App.js. Pour exécuter l'exemple, suivez ces étapes :

• Cloner le référentiel.
• Accédez au répertoire example dans le terminal.
• Exécutez npm install ou yarn install pour installer les dépendances.
• Exécutez npm start ou yarn start pour démarrer l'application.

Styles

Le composant Modal ne fournit pas de styles par défaut pour la fenêtre modale elle-même. Vous êtes libre d'ajouter vos propres styles CSS pour personnaliser l'apparence de la modal selon vos besoins. Cependant, le composant peut inclure des styles par défaut pour l'overlay (l'arrière-plan sombre qui apparaît derrière la modal). Si vous souhaitez personnaliser ces styles, vous pouvez utiliser les classes CSS suivantes :

• modal-overlay : Classe pour l'overlay de la modal.
• modal : Classe pour la fenêtre modale elle-même.

Contribuer

Les contributions sous forme de rapports de bugs, demandes de fonctionnalités ou pull requests sont les bienvenues ! Pour toute contribution majeure, veuillez d'abord ouvrir une issue pour discuter de ce que vous aimeriez changer.

License

Ce projet est sous licence MIT.