Hello, this is a modal component who can be customized.
I will show you an example of use comented.
(You will have a style already apply on the component.)
import { useState } from "react";
import CustomizedModal from './modal/CustomizedModal';
export default function App () {
const [modal, setModal] = useState(false);
function change () {
setModal(!modal);
}
const closeButtonTextData = {
closeButtonTextValue: 'Close',
textNotificationValue: 'Notification message',
confirmationTextValue: 'Understood'
};
return (
<>
{/* Trigger example for open modal */}
<button onClick={change}>
Open modal {modal ? 'true': 'false'}
</button>
{/*
- This is the component -
He's in absolute position, better if it placed in top of the other components
*/}
<CustomizedModal
closeButtonText={closeButtonTextData.closeButtonTextValue}
textNotification={closeButtonTextData.textNotificationValue}
confirmationText={closeButtonTextData.confirmationTextValue}
modalState={modal}
changeModalState={setModal}
/>
</>
);
}