Oc-p14-simple-react-modale NPM

React Modal: A simple react component modal for the OC P14 Whealth Health project

Overview

The React Modal is a customizable component that renders a pre-formatted modal for use in React projects. This component offers several features and options, such as:

Installation

To use the React Modal component, you can install it via npm:

npm install oc-p14-wh-react-modale

Usage

Importing the Modal Component

To use the Modal component, simply import it into your React file and define the desired children for the content of your modal. You can also define custom styles if you want to further customize your modal's appearance.

import { Modal } from @the_algar/oc-p14-react-modale

Example

<Modal
    hideModal={closeModal}
    styleModalBackground
    styleModal={{ padding: 25, backgroundColor: 'red' }}
    styleModalContent
    animation={true}
    closeButton={true}
>
    <h1>Your modal message here!</h1>
    <p>Add more text, an image, or an input field.</p>
</Modal>

State

The Modal component's functionality is controlled by the local state of the parent component. Therefore, the parent component requires state to work properly. You can use any variable names you prefer to track the state of the modal. I used modalIsOpen and setModalIsOpen in my example.

const modalIsOpen, setModalIsOpen = useState(false)

The initial state of the modal should be set to false. An action on the parent component changes the state to true.

const handleSubmit = () => { setModalIsOpen(true) }

This will display the Modal component:

{modalIsOpen && ( <Modal hideModal={closeModal} styleModalBackground styleModal styleModalContent animation={true} closeButton={true}

>
    <p>Customize the modal and message here!</p>	      
</Modal>

)}

Props

The following table lists the props available for the Modal component:

Name	Type	Description	Required
hideModale	Function	to close modal	required
styleModaleBackground	Object	inline styles	optional
styleModale	Object	inline styles	optional
styleModaleContent	Object	inline styles	optional
animation	Boolean	to activate or not the animation of the modal appear	required
closeButton	Boolean	to display or not button close	required

1. hideModale prop

The "hideModal" prop is a function that closes the modal. You should provide a function to hide the modal when the user clicks the button or the background of the modal. This prop is required.

const closeModale = () => { setModaleIsOpen(false) }

2. styleModaleBackground prop

The "styleModaleBackground" prop receives inline styles for customizing the modal background.

3. styleModale prop

The "styleModaleBackground" prop receives inline styles for customizing the modal background.

4. styleModaleContent prop

The "styleModaleContent" prop receives inline styles for customizing the modal's content.

5. animation prop

The "animation" prop is required and can be set to true to enable the built-in animation effect or false to turn it off.

6. closeButton prop

The "closeButton" prop is required and receives a boolean value to determine whether the close button should be displayed (true) or not (false).

"closeButton" is required.