1.0.1 • Published 2 years ago

@ejfsc/react-modal-component v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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

PropertiesTypesRequired
hideModalfunctionX
titlestring
childrennodeX
modalSizestring
customModalWidthstring
customModalHeightstring
modalTextColorstring
closeBtnContainerColorstring

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

1.0.1

2 years ago

1.0.0

2 years ago