1 - Import the pluggin :
import { Modale } from "ho-modal"
2 - Use this state :
const [ displayModal, setDisplayModal ] = useState(false)
3 - Return the modal :
<Modale
title={ modalTitle }
text={ modalText }
cross={ modalCloseButton }
button={ modalCloseButtonText }
showModal={ displayModal }
hideModal={() => setDisplayModal(false)}
/>
Customize the style with the CSS class name.
modal : custom the general modal
modal__header : include title and button cross
modal__header--title : title of the modal
modal__header--button : cross button
modal__text : text of the modal
modal__close : button close
modal__button : all buttons
The names use all lowercase letters with dashes for separation if you want use Sass
Custom the style :
.modal {
z-index: 1001;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white;
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
}
.modal__header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.modal__header--title {
font-weight: bold;
font-size: 2rem;
}
.modal__header--button {
font-weight: bold;
font-size: 1.2rem;
}
.modal__text {
font-weight: 700;
font-size: 1.2rem;
}
.modal__close{
font-weight: bold;
font-size: 0.8rem;
}
/* reset buttons */
.modal__button {
background-color: transparent;
border: none;
cursor: pointer;
}