1.1.7 • Published 6 months ago

modalp14oc v1.1.7

Weekly downloads
-
License
-
Repository
-
Last release
6 months ago

React Modal Component

Description

Un composant modal simple et réutilisable pour React, basé sur React Portal et Material UI.

Installation

npm install react-modal-component

Dépendances requises

DépendanceVersion recommandée
React≥ 16.8.0
ReactDOM≥ 16.8.0
Material UI≥ 4.0.0

Utilisation

Le composant PortalExample vous permet d'afficher une fenêtre modale dans votre application React.

Import du composant

import PortalExample from 'react-modal-component';
import './modal.css'; // Assurez-vous d'importer les styles

Exemple de base

<PortalExample 
  nameButton="Voir détails" 
  texteModal="Voici les détails du produit."
/>

Props

Props principales

PropTypeObligatoireDescription
nameButtonStringOuiTexte affiché sur le bouton d'ouverture
texteModalNodeOuiContenu affiché dans la modal
onOpenFunctionNonFonction exécutée avant l'ouverture

Détails des props

nameButton (obligatoire)

  • Type: String
  • Description: Texte qui sera affiché sur le bouton d'ouverture de la modal
  • Exemples:
    • "Ouvrir"
    • "Voir détails"
    • "Informations"

texteModal (obligatoire)

  • Type: Node (String, JSX, ou éléments React)
  • Description: Contenu qui sera affiché à l'intérieur de la modal
  • Possibilités:
    • Texte simple: "Votre demande a été enregistrée"
    • Éléments JSX:
      <div>
        <h2>Titre</h2>
        <p>Description</p>
        <img src="image.jpg" alt="Description" />
      </div>
    • Composants React: <UserForm />

onOpen (optionnel)

  • Type: Function
  • Description: Fonction exécutée avant l'ouverture de la modal
  • Retour:
    • true: la modal s'ouvre
    • false: la modal reste fermée
  • Cas d'utilisation:
    <PortalExample 
      nameButton="Soumettre" 
      texteModal={<ConfirmationMessage />}
      onOpen={() => {
        if (isFormValid()) {
          return true;
        } else {
          alert("Veuillez remplir tous les champs obligatoires");
          return false;
        }
      }}
    />

Fonctionnement

graph TD
    A[Affichage du bouton] --> B[Clic sur le bouton]
    B --> C{onOpen existe?}
    C -->|Non| E[Ouvre la modal]
    C -->|Oui| D{onOpen retourne true?}
    D -->|Oui| E
    D -->|Non| F[Reste fermé]
    E --> G[Affiche le contenu]
    G --> H[Clic sur Close/Extérieur]
    H --> I[Ferme la modal]

Styles

Le composant nécessite un fichier CSS externe (modal.css) qui doit définir:

Classe CSSRôlePropriétés recommandées
.modal-overlayFond semi-transparentposition: fixed, background-color: rgba(0,0,0,0.5)
.modalBoîte modalebackground: white, border-radius: 8px, padding: 20px

Exemple de CSS

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background: white;
  border-radius: 8px;
  padding: 20px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

Cas d'utilisation

ScénarioExemple
Message de confirmation<PortalExample nameButton="Supprimer" texteModal="Êtes-vous sûr de vouloir supprimer cet élément?" />
Détails d'un produit<PortalExample nameButton="Détails" texteModal={<ProductDetails id={product.id} />} />
Formulaire pop-up<PortalExample nameButton="S'inscrire" texteModal={<RegistrationForm />} />
Notifications<PortalExample nameButton="Notifications" texteModal={<NotificationList notifications={userNotifications} />} />
1.1.7

6 months ago

1.1.6

6 months ago

1.1.5

6 months ago

1.1.4

6 months ago

1.1.3

6 months ago

1.1.2

6 months ago

1.1.1

6 months ago

1.1.0

6 months ago

1.0.9

6 months ago

1.0.8

6 months ago

1.0.7

6 months ago

1.0.6

6 months ago

1.0.5

6 months ago

1.0.4

6 months ago

1.0.3

6 months ago

1.0.2

6 months ago

1.0.1

6 months ago

1.0.0

6 months ago