Modale_by_barberousse NPM

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

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.