La fenêtre modale ultime... Si, si !

Composant REACT développé dans le cadre du parcours de formation OpenClassRooms "Développeur Front-End - Javacsript REACT"

Fonctionnalités

Afficher une fenètre modale contenant un message d'information à destination de l'utilisateur.

Une fenêtre modale est, dans une interface graphique, une fenêtre qui prend le contrôle total du clavier et de l'écran. Elle est en général associée à un message d'informaiton, une question à laquelle il est impératif que l'utilisateur réponde avant de poursuivre, ou de modifier quoi que ce soit. (Source : Wikipedia)

Pré-requis

• Node.js v18.12.0
• Npm 9.6.7 ou yarb v1.22.19
• React 18.2.0
• Styled_components 6.0.8

Technologies utilisées

• HTML 5
• CSS 3
• Javascript ES6
• REACT 18.2.0

Installation sur Visual Studio Code

Dans un terminal :

npm i modale_by_barberousse

ou

yarn add modale_by_barberousse

Utilisation

Dans la fonction du composant appelant la fenêtre modale :

Importer le composant 'Modal' :

import Modal from "modale_by_barberousse"

Dans la fonction par elle-même, initialiser le state gérant l'état de la fenêtre modale :

const [isOpen, setIsOpen] = useState(false)

Dans le bloc return, insérer la ligne suivante (configuration minimale) :

{
  isOpen && <Modal setIsOpen={setIsOpen} />
}

Dans les props de l'élement déclencheur, par exemple, un bouton "Open Modal" :

<button onClick={() => setIsOpen(true)}>Open Modal</button>

Les props

La fenêtre modale est fournie avec un CSS par défaut mais il est possible de modifier certains paramètres pour adapter le composant à vos besoins :

| Paramètre | Action sur | Format | Valeur par défaut | | ----------- | ------------------------------- | ---------------------------------------------- | -------------------- | | text | Texte affiché dans la modale | string | 'Texte de la modale' | | textColor | Couleur du texte de la modale | '#00f' ou 'blue' ou 'rgb(0,0,255) | '#000' | | textSize | Taille du texte de la modale | toutes les unités de fontSize (em, rem, px...) | '3rem' | | buttonColor | Couleur du bouton de fermenture | '#00f' ou 'blue' ou 'rgb(0,0,255) | '#f00' | | modalWidth | Largeur de la modale | pixel ou pourcentage | '50%' | | modalHeight | Hauteur de la modale | pixel uniquement | '200px' | | modalBG | Couleur du fond de la modale | '#00f' ou 'blue' ou 'rgb(0,0,255) | '#fff' |

Pour une modale rouge opaque à 80%, faisant 50% de la largeur de l'écran, 300px de hauteur avec le message "Le texte de la Modale" en bleu avec une taille de 2.5em et un bouton de fermeture gris, on aura :

{
  isOpen && (
    <Modal
      setIsOpen={setIsOpen}
      buttonColor="gray"
      modalWidth="50%"
      modalHeight="300px"
      modalBG="rgb(255,0,0,0,0.8)"
      text="Le texte de la Modale"
      textColor="blue"
      textSize="2.5em"
    />
  )
}

Si un des paramètres ci-dessus n'est pas transmis , la valeur par défaut sera appliquée.

Pour fermer la modale :

• Clic sur le bouton 'X'
• Clic sur le fond de l'écran
• Touche 'Escape'

Assistance

Sans objet.

License