0.0.4 • Published 5 years ago
react-custom-modal v0.0.4
react-custom-modal
This component supports showing any custom modal dialog.
It is possible to display by method call.
Install
npm install react-custom-modal
Usage
import React, {Component} from 'react'
import 'react-custom-modal/dist/index.css'
import Modal from 'react-custom-modal'
export default class App extends Component {
constructor(props) {
super(props)
this.dialog = React.createRef()
this.showDialog = this.showDialog.bind(this)
}
showDialog() {
this.dialog.current.show({
component: <CustomDialog/>,
animation: 'slideUp'
})
}
render() {
return (
<div>
<button className='btn'
onClick={this.showDialog}>
Show Dialog
</button>
<Modal className='Custom'
dialogClass='CustomDialog'
ref={this.dialog}/>
</div>
)
}
}
class CustomDialog extends Component {
render() {
const {close} = this.props
return (
<div>
<div className='modal-header'>
<span className='title'>Modal title</span>
<button className='close-btn' onClick={close}>
<span>×</span>
</button>
</div>
<div className='modal-body'>
<p>Modal body text goes here.</p>
</div>
<div className='modal-footer'>
<button className='btn' onClick={close}>Cancel</button>
<button className='btn' onClick={close}>Save</button>
</div>
</div>
)
}
}
License
MIT © sk39