1.1.0 • Published 7 years ago

m-react-modal v1.1.0

Weekly downloads
4
License
MIT
Repository
github
Last release
7 years ago

Usage

npm i m-react-modal
import Modal from 'm-react-modal'

<Modal 
  status={this.state.modifyStatus} 
  onHide={() => this.setState({ modifyStatus: false })}
>
  <h1>I am a react modal</h1>
</Modal>

Optional

<Modal {...opts}>
  <h1>I am a react modal</h1>
</Modal>

opts:

y: '50px'

modalClassName: ''

layerClassName: ''

contentClassName: ''

layerStl: {
  position: 'fixed',
  background: 'rgba(0,0,0,0.12)',
  zIndex: 9,
  height: '100%',
  width: '100%',
  transition: 'opacity 0.3s',
  WebkitTransition: 'opacity 0.3s',
  visibility: 'hidden',
  opacity: 0,
  top: 0,
  left: 0,
  cursor: 'pointer',
}

contentStl: {
  boxShadow: '0 5px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.4)',
  top: 0,
  position: 'fixed',
  width: '50%',
  background: '#fff',
  margin: '0 auto',
  left: 0,
  right: 0,
  padding: '15px',
  borderRadius: '4px',
  zIndex: 10,
  visibility: 'hidden',
  opacity: 0,
  maxHeight: '80%',
  overflowY: 'auto',
  transition: 'all 0.3s',
  WebkitTransition: 'all 0.3s',
}