@fabiendev/react-modal-component NPM

React Modal Component

Presentation

Customizable modal component for React JS

Install the modal

Use NPM command:

npm i @fabiendev/react-modal-component

Import modal in your project

import  ReactModalComponent  from "@fabiendev/react-modal-component";

Example in component

import { useState } from "react";
import ReactModalComponent  from "@fabiendev/react-modal-component";

const ModalExample = () => {
    const [displayModal, setDisplayModal] = useState(false);
    const toggleModal = () => setDisplayModal(!displayModal);

    return (
        <div>
            <h2>Modal Example</h2>
            <button onClick={toggleModal}>Open Modale</button>
            {displayModal &&
                <ReactModalComponent
                    hideModal={toggleModal}
                    title="Modal Title"
                    darkMode
                    modalSize="large"
                >
                    <p>Message in modal</p>
                </ReactModalComponent>
            }
        </div>
    );
};

export default ModalExample;

Properties

Properties	Types	Required
`hideModal`	function	X
`title`	string
`children`	node	X
`darkMode`	bool
`modalSize`	string
`customModalWidth`	string
`customModalHeight`	string
`modalTextColor`	string
`closeBtnContainerColor`	string

Properties description

hideModal {function}: Function to hide modal
- example:
```
    hideModal={toggleModal}
```
title {string}: Title of modal
- example:
```
    title="Modal Title"
```

children {node}: Content to display inside modal

example:

    <ReactModalComponent>
        <p>Message in modal</p>
    </ReactModalComponent>

darkMode {bool}: Whether to display modal in dark mode
- example:
```
    darkMode={true}
```
modalSize {string}: Predefined size of modal ("large", "medium", "small")
- example:
```
    modalSize="large"
```
customModalWidth {string}: Custom width for modal
- example:
```
    customModalWidth="500px"
```
customModalHeight {string}: Custom height for modal
- example:
```
    customModalHeight="500px"
```
modalTextColor {string}: Text color for modal
- example:
```
    modalTextColor="#93AD18"
```
closeBtnContainerColor {string}: Background color for close button
- example:
```
    closeBtnContainerColor="#748813"
```