Modal window in React

A customized modal used in Openclassrooms project entitled 'Faites passer une librairie jQuery vers React'. This is a plugin in React.

Setup

You can find my plugin at www.npmjs.com

• npm i alex-modal-in-react

Modal's Props

• containerModalStyle Used to personalized container of modal's style Example: containerModalStyle={{backgroundColor: blue}}

• closeModal Used to close the modal. This prop is a function. Example: closeMosal={() => setModalOpening(false)}

• textModal Used to personalized the message inside the modal. Example: textModal='Employee Created!'

• styleModal Used to personalized the css styles of the modal window. Example: styleModal={{height:'30px', width:'60px', color:'red'}}

• styleButton Used to personalized css styles of the modal's closure button Example: styleButton={{height:'15px'}}

Example of use

const [modalOpening,setModalOpening] = useState(false)

return(

    <button onClick={() => setModalOpening(true)}>Open modal window</button>
    {modalOpening ?
        <Modal
        closeModal={() => setModalOpening(false)}
        textModal='Employee Created!'    
        />
    : null
    }      
)

Explanations about example of use

When user clicks on button, it will open modal window. Next, when the user clicks on modal's closure button it will close the modal window. The useState's hook is used to control the display of the modal window. When button is clicked modalOpening has a value equal true so modal is displayed. When modal's closure button is clicked modalOpening has a value of false so the modal windows is not displayed. With the prop textModal the text displayed inside the modal window is 'Employee Created!'.

Entire JSX Modal's code

useEffect(() => {

    function escapeKeyManagement(event){
        if( event.code === 'Escape'){
            closeModal()
        }
    }

    document.addEventListener('keydown', escapeKeyManagement)
    return function(){
        document.removeEventListener('keydown', escapeKeyManagement)
    }
})

return (
    <div className='containerModal' style={containerModalStyle}>
        <div className='modal' style={styleModal}>
            <button className='modalButton' style={styleButton} onClick={closeModal}>X</button>
            <p>{textModal}</p>
        </div>
    </div>
)