Fenêtre modale developpée pour le projet 14 du parcours OPENCLASSROOMS 'Développeur d'application javascript REACT
npm install modale_by_barberousseComposant REACT développé dans le cadre du parcours de formation OpenClassRooms "Développeur Front-End - Javacsript REACT"
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)
- Node.js v18.12.0
- Npm 9.6.7 ou yarb v1.22.19
- React 18.2.0
- Styled_components 6.0.8
- HTML 5
- CSS 3
- Javascript ES6
- REACT 18.2.0
Dans un terminal :
``
npm i modale_by_barberousse
ou
`
yarn add modale_by_barberousse
Importer le composant 'Modal' :
`javascript`
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 :
`jsx`
const [isOpen, setIsOpen] = useState(false)
Dans le bloc return, insérer la ligne suivante (configuration minimale) :
`jsx`
{
isOpen &&
}
Dans les props de l'élement déclencheur, par exemple, un bouton "Open Modal" :
`html`
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 :
`jsx``
{
isOpen && (
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.
- Clic sur le bouton 'X'
- Clic sur le fond de l'écran
- Touche 'Escape'
Sans objet.
