A simple fullscreen modal component for React.JS
To install the latest version, you can use npm or yarn.
$ npm install julie-react-ts-modal$ yarn add julie-react-ts-modalTo use the modal, you will need to import the custom hook useModal() along with the modal component itself. The only required props are isOpen and closeModal, which indicates whether the modal should be displayed, and a function to close the modal.
The following is an example of using the modal specifying all the possible props:
import { Modal, useModal } from 'julie-react-ts-modal'
function App() {
const { isOpen, openModal, closeModal, handleEscClose } = useModal()
const onAfterCloseFunction = () => { console.log('Modal closed') }
return (
<button onClick={() => openModal()}>
<Modal
isOpen={
isOpen
/* State variable (boolean) stored in the useModal hook, describing if the modal should be shown or not.*/}
closeModal={
closeModal
/* Function to close the modal from the useModal hook*/}
modalVisible={
'visible'
/* String (default: 'visible') className of the modal when it is visible (controls opacity and visibility)*/}
showClose={
true
/* Boolean (default: true) indicating if the close button is displayed*/}
closeText={
'Close'
/* String (default: 'Close') containing the text displayed in the close button */}
handleEscClose={
handleEscClose
/* Function closing the modal by pressing the escape key*/}
clickOverlayClose={
true
/* Boolean (default: true) indicating if the modal can be closed by clicking on the overlay*/}
onAfterClose={
onAfterCloseFunction
/* Function (default: null) to be executed after the modal has been closed*/}
afterCloseEventDelay={
500
/* Number (default: 0) indicating the delay in ms before the onAfterClose function is executed*/}
modalClass={
'modalClassName'
/*String (default: undefined) additional className for the modal div*/}
overlayClass={
'overlayClassName'
/*String (default: undefined) additional className for the modal overlay div*/}
modalTitle={
'Modal Title'
/* String (default: undefined) containing the title of the modal*/}
textContent={
'Example text content'
/* String (default: undefined) containing the text to be displayted inside the modal content div*/}
htmlContent={
'<div>Insert HTML</div>'
/* String (default: null) containing some HTML content to be displayed in the modal content div*/}
ChildComponent={
<ChildComponent props={'componentProps'} />
/* React Component (default: null) to be displayed inside the modal content div*/}
animationClass={
'fade'
/* String (default: 'fade') className to be applied to the modal when it is opened or closed*/}
animationDuration={
'0.3s'
/* String (default: '0.3s') duration of the open/close animation*/}
showSpinner={
true
/* Boolean (default: false) indicating if a spinner should be displayed while the modal is opening*/}
customSpinner={
'<div>Loading...</div>'
/* String (default: undefined) containing some HTML content to be displayed as a custom spinner*/}
spinnerDuration={
2000
/* Number (default: 1000) in ms indicating the duration during which the spinner is displayed before the modal content appears*/}
/>
)
}