modal-component-hw v1.0.1

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 :

1. Cloner le référentiel.
2. Accédez au répertoire example dans le terminal.
3. Exécutez npm install ou yarn install pour installer les dépendances.
4. 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.