react-modal-text

Ce composant permet de créer un bouton qui ouvre une modale avec du texte. Il est également possible d'affecter des fonctions à l'ouverture et à la fermeture de la modale. Ce composant a été créé dans le cadre d'un projet de la formation OpenClassrooms Développeur d'application - JavaScript React.

Utilisation

Ce composant à 4 propriétés :

• buttonName [String] (obligatoire)
• text [String] (obligatoire)
• onOpen [function]
• onClose [function]

Exemples

Import du composant et de son style

import { ModalText } from "react-modal-text";
import 'react-modal-text/dist/style.css';

Juste une modale avec un texte

<ModalText buttonName="Modal button" text="Text in modal"></ModalText>

Fonction lors de l'ouverture et de la fermeture de la modale

const openModalFunction = () => console.log("modal open");
const closeModalFunction = () => console.log("modal close");

<ModalText buttonName="Modal button" text="Text in modal" onOpen={openModalFunction} onClose={closeModalFunction}></ModalText>

react-modal-text

This component create a button that open textual modal. There is possible to affect functions when open and close modal. This component has created during the OpenClassrooms formation : Développeur d'application - JavaScript React.

Utilisation

This component has 4 properties :

• buttonName [String] (require)
• text [String] (require)
• onOpen [function]
• onClose [function]

Examples

Import component and style

import { ModalText } from "react-modal-text";
import 'react-modal-text/dist/style.css';

Simple modal with text

<ModalText buttonName="Modal button" text="Text in modal"></ModalText>

Function when open and close modal

const openModalFunction = () => console.log("modal open");
const closeModalFunction = () => console.log("modal close");

<ModalText buttonName="Modal button" text="Text in modal" onOpen={openModalFunction} onClose={closeModalFunction}></ModalText>