Documentation du composant :

Introduction

react-modal-component-by-jeremy est un composant React réutilisable permettant d'afficher des modales accessibles et stylisées avec différents types d'alertes.

Prérequis

Node.js : >= 16.0.0
React : >= 17.0.0
Éditeur recommandé : VS Code

Installation

npm install react-modal-component-by-jeremy@latest

yarn add react-modal-component-by-jeremy@latest

Utilisation

Importation

import Modal from "react-modal-component-by-jeremy";

Exemple de base

import React, { useState } from "react";
import Modal from "react-modal-component-by-jeremy";

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

    return (
        <div>
            <button onClick={() => setIsOpen(true)}>Ouvrir la modale</button>
            <Modal
                isOpen={isOpen}
                onClose={() => setIsOpen(false)}
                type="info"
                title="Titre de la modale"
            >
                <p>Contenu personnalisé de la modale</p>
            </Modal>
        </div>
    );
};

export default App;

Props disponibles

Nom	Type	Description
`isOpen`	`bool`	Détermine si la modale est affichée ou non.
`onClose`	`func`	Fonction de fermeture de la modale.
`title`	`string`	Titre affiché dans la modale.
`children`	`node`	Contenu personnalisé de la modale (peut inclure du texte, des composants React, des images, etc.).
`type`	`string`	Type de modale (`"success"`, `"error"`, `"info"`).

Accessibilité

Navigation au clavier gérée (fermeture avec Escape, focus piégé dans la modale).
Utilisation des attributs aria-labelledby et aria-describedby pour améliorer l'accessibilité.

Icônes intégrées

Le composant inclut des icônes SVG pour les types de modale :

CheckCircle pour success
ErrorIcon pour error
InfoCircle pour info

Personnalisation CSS

Les styles par défaut sont définis dans react-modal-component.css. Vous pouvez les surcharger selon vos besoins.

Par exemple, si vous rencontrez un problème de padding lié aux polices, vous pouvez ajouter la règle CSS suivante :

.modal-inner_content {
    padding: 20px !important;
}

Contribution

Les contributions sont les bienvenues ! Forkez le projet et soumettez une pull request sur GitHub.

Licence

Ce projet est sous licence MIT.

Package detail

react-modal-component-by-jeremy

readme