1.0.2 • Published 2 years ago

react-simple-modal-package v1.0.2

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

React-simple-modal-package

This modal take all view screen with backdrop dark effect.

Screenshots

App Screenshot

Installation

  npm install react-simple-modal-package

or

  yarn add react-simple-modal-package

Usage/Examples

🚨 It is important to put the component at a higher level of you page so the modal takes up all the space.

import React, { useState } from "react";
import Modal from "react-simple-modal-package";

const MyPage = ({ children }) => {
  const [showModal, setShowModal] = useState(false);

  return (
    <div className="container">
      <Modal visible={showModal} setVisible={setShowModal}>
        <p>Here i put whatever i want to display in my modal</p>
      </Modal>
      <p>All my page content</p>
    </div>
  );
};

export default MyPage;

Props

PropTypeRequiredDescription
visibleboleantrue-
setVisiblefunctiontruefor close button (return false)
childrencomponentfalseYour children here !
backdropOpacityintegerfalsehandle the background opacity (default 0.5)
modalStyleobjectfalsehandle modal style
disableCloseButtonboleanfalse-
1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago