1.0.1 • Published 2 years ago
@ejfsc/react-modal-component v1.0.1
React Modal Component
Presentation
Customizable modal component for React JS
Install the modal
Use NPM command:
npm i @ejfsc/react-modal-component
Import modal in your project
import ReactModalComponent from '@ejfsc/react-modal-component';
Example in component
import { useState } from 'react';
import ReactModalComponent from '@ejfsc/react-modal-component';
const MyModal = () => {
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"
modalSize="large"
>
<p>Message in modal</p>
</ReactModalComponent>
)}
</div>
);
};
export default MyModal;
Properties
Properties | Types | Required |
---|---|---|
hideModal | function | X |
title | string | |
children | node | X |
modalSize | string | |
customModalWidth | string | |
customModalHeight | string | |
modalTextColor | string | |
closeBtnContainerColor | string |
Properties description
hideModal
{function}: Function to hide modal- example:
hideModal = { toggleModal };
- example:
title
{string}: Title of modal- example:
title = 'Modal Title';
- example:
children
{node}: Content to display inside modal- example:
<ReactModalComponent> <p>Message in modal</p> </ReactModalComponent>
- example:
darkMode
{bool}: Whether to display modal in dark mode- example:
darkMode={true}
- example:
modalSize
{string}: Predefined size of modal ("large", "medium", "small")- example:
modalSize = 'large';
- example:
customModalWidth
{string}: Custom width for modal- example:
customModalWidth = '500px';
- example:
customModalHeight
{string}: Custom height for modal- example:
customModalHeight = '500px';
- example:
modalTextColor
{string}: Text color for modal- example:
modalTextColor = '#93AD18';
- example:
closeBtnContainerColor
{string}: Background color for close button- example:
closeBtnContainerColor = '#748813';
- example: