Hey, I just built my first package and there is the way to use my modal from npm.
Install my-project with npm
npm i modal-weather
use the link to import the modal in your component :
import Modal from 'modal-weather/dist/components/modal'
there is 4 params inside the modal to use:
use the component in that way :
exemple:
<Modal
text='Thank you',
/>
Props | Event |
---|---|
className | display the classname you want, i give a css file with the classname to have a first basic modal |
style | inline style if you to use it in the component |
text | 'use string to put the message you want to display in the modal' |
close | {the function you want to put in the modal, generally i use useState to display it} |
The css can be import through the css file inside the package.
And the modal can be display in that way.
for an exemple : just change the Form component by a button event with openModal onclick action:
import 'modal-weather/dist/components/styles/modal.css'
import React from 'react';
import '../App.css';
import Modal from 'modal-weather/dist/components/modal'
import { useState } from 'react';
const ModalPage =()=> {
const [modalOpen, SetModal] = useState(false)
const closeModal = () => {
SetModal(false)
}
const openModal =(e)=> {
e.preventDefault()
SetModal(true)
setTimeout(() => {
document.getElementById('modal').classList.add('modal-open')
document.getElementById('modalOverlay').style.display ="block"},)
}
return (
modalOpen ?
<div id="App">
<Modal
className={'modal'}
style={{opacity: '100',color: "black"}}
text={"Employee Successfully Created !"}
close={closeModal}/>
<button onClick={openModal}>Open</button>
</div>
:
<div>
<div id="App" style={{display: 'none'}} >
<Modal
className={'modal'}
style={{opacity: '100',}}
text={"Employee Successfully Created !"}
close={closeModal}/>
</div>
<div>
<button onClick={openModal}>Open</button>
</div>
</div>
);
}
export default ModalPage;
there is a basic style for the modal centered and background opacity.
Thank You, if you want to give me some comments im open to it. Glad to share my first work on npm!