Skip to content

Latest commit

 

History

History
executable file
·
39 lines (29 loc) · 928 Bytes

README.md

File metadata and controls

executable file
·
39 lines (29 loc) · 928 Bytes

react-modal

A React Component To Use Modal Like Bootstrap Intelligently

Background

Bootstrap Modal is beautiful, it is still attractive to be used by React, Modal is displayed in the center of the browser window,it uses margin-top to make it center instead of flex box (CSS3), so it is also fit for the browser of lower versions.

Installation

$ npm i -S @jayson991/react-modal

Usage With React

import React from 'react'
import Modal from '@jayson991/react-modal'

const App = () => {
  const [showModal, setShowModal] = useState(false)

  return (
    <div className='App'>
      <span onClick={() => setShowModal(true)}>Click Me!</span>
      <Modal
        title='Hello'
        showModal={showModal}
        onHideModal={() => setShowModal(false)}
      >
        <h1>Hello World!</h1>
      </Modal>
    </div>
  )
}

export default App