react-modale-jf v2.0.1
react-modale-jf
Author : Jérôme Fromantin, French junior web developer.
"react-modale-jf" is a library made with
create-react-library
which gives a full modal view displayed with a message you can choose yourself.
Version: 2.0.1
Last Modified: 3rd May 2022
Installation
Run the following command: npm install react-modale-jf
Library used
prop-types version 15.8.1
Usage
The library contains one single component called <Modale/>
with its own CSS style.
It can be used as shown below in the example code:
import React, { useState } from 'react'
import { Modale } from 'react-modale-jf'
import 'react-modale-jf/dist/index.css'
const App = () => {
const [open, setOpen] = useState(false)
function displayModale() {
setOpen(true)
}
function closeModale() {
setOpen(false)
}
return (
<div>
<button onClick={displayModale} style={{cursor: "pointer", margin: "10px"}}>Submit</button>
<Modale message="Employee Created!" open={open} onClose={closeModale}/>
</div>
)
}
export default App
As you can see, <Modale/>
uses 3 props which are required to make it work at its best.
- The "message" value is of the string type. It contains of course the message you want to see in the modale.
- The "open" value is of the boolean type. It contains the state (opened or closed) of the modale.
- The "onClose" value is of the function type. It calls the function which closes the modale.
More info
The GitHub repository containing this library can be found at: https://github.com/Jerome-Fromantin/JeromeFromantin_14_react-modale-jf_lib.git
Thanks
I wish to thank Armel Nyobe Kendeck, my mentor at OpenClassrooms, who helped me to improve the functioning of this library...
License
MIT © Jerome-Fromantin