@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 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';

NPM Package

• @ejfsc/react-modal-component