@makabay/customizedmodal

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.)

// We will need to share the parent state to our "CustomizedModal" component
import { useState } from "react";

// Components
import CustomizedModal from './modal/CustomizedModal';


// This App component can the component where you want placed the modal
export default function App () {
    // Here we defined a booleen state hook
    const [modal, setModal] = useState(false);

    // This is the function who will open the modal
    function change () {
        setModal(!modal);
    }

    // For CustomizedModal (props) component, it will be your custom text button or message
    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}
            />
        </>
    );
}