react-modal-selnir v0.6.0

react modal selnir

Simple Modal created for HRnet.

Intallation

To install, you can either use npm

npm install react modal selnir

How to use

By default, the modal will be hidden as represented by the false boolean set in useState(false), to show it, you'll have to set showModal to true with setShowModal(true).

Example

import React, { useState } from 'react'
import Modal from './lib/react-modal-selnir'
import ReactDOM from 'react-dom'

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

const hideModal = () => showModal && setShowModal(false)

return (

<div>
<h1 style={{ textAlign: 'center', padding: '10px' }}>react-modal</h1>
<button
style={{
          width: '200px',
          display: 'block',
          margin: '0 auto',
          padding: '10px',
          background: 'none',
          border: 'none',
          backgroundColor: '#eee',
          fontSize: '20px',
          cursor: 'pointer'
        }}
onClick={() => setShowModal(true)} >
Show Modal
</button>
<Modal show={showModal} onClickCloseBtn={hideModal}>
<h1>I am a modal</h1>
</Modal>
</div>
)
}