Basic Modal React

A simple and basic reusable modal component built in javascript using react

No other third party libraries just only components in jsx

Installation

npm i master-react-modal

yarn add master-react-modal

pnpm add master-react-modal

Example (classic)

import { Modal, ModalHeader, ModalBody } from 'master-react-modal';
import { useState } from 'react';

const Example = () => {
  const [openModal, setOpenModal] = useState(false);
  const closeModal = () => setOpenModal(false);

  return (
    <div className="app">
      <button className="btn btn-primary" onClick={() => setOpenModal(true)}>
        Show Modal
      </button>
      <Modal isOpen={openModal} className="modal-cadetblue" close={closeModal}>
        <ModalHeader title="Header title" close={closeModal} />
        <ModalBody>Your body content</ModalBody>
      </Modal>
    </div>
  );
};

export default Example;

💻 See the demo

open master-react-modal.

📚 Technology used

• NPM
• JavaScript
• HTML
• React
• CSS SCSS
• GIT (GitHub)
• Editeur de code source: VSC: Visual Studio Code.
• ESLint
• Prettier