1.0.44 • Published 6 years ago
easy-react-modal v1.0.44
easy-react-modal
wrap any react component with this Modal component and turn your component as modal.
How to use it?
Step1:
npm install --save easy-react-modal
Step2: import the component
import Modal from 'easy-react-modal';
Step3: wrap your component which should open as modal. This can be react component or plain html tag.
<Modal hide={true} close={callbackFn}>
<div>Great!!</div>
</Modal>
Props.
- hide=false to show the modal
- hide=true to close it.
- close={callbackFn} callback function which will toggle the above hide value. You can also perform additional task inside this function.
Optional Props.
- styles={{background:'rgba(0,0,0,0.2)', container:'white'}} pass styles props to change the color of background and the container.
- width={'100px'} pass width props to change the width of the container.
#Example
import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'easy-react-modal';
class App extends React.Component {
constructor() {
super();
this.state = {
modalOff: true
}
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}
openModal () {
this.setState( {
modalOff: false
});
}
closeModal () {
this.setState( {
modalOff: true
});
}
render() {
return (
<React.Fragment>
<button onClick={this.openModal}>OPEN MODAL</button>
<Modal hide={this.state.modalOff} close={this.closeModal} styles={{background:'rgba(0,0,0,0.2)', container:'white'}}>
<div>Great!!</div>
</Modal>
</React.Fragment>
);
}
}
1.0.44
6 years ago
1.0.43
6 years ago
1.0.42
6 years ago
1.0.41
6 years ago
1.0.40
6 years ago
1.0.39
6 years ago
1.0.38
6 years ago
1.0.37
6 years ago
1.0.36
6 years ago
1.0.35
6 years ago
1.0.34
6 years ago
1.0.33
6 years ago
1.0.32
6 years ago
1.0.31
6 years ago
1.0.30
6 years ago
1.0.29
6 years ago
1.0.28
6 years ago
1.0.27
6 years ago
1.0.26
6 years ago
1.0.25
6 years ago
1.0.24
6 years ago
1.0.23
6 years ago
1.0.22
6 years ago
1.0.21
6 years ago
1.0.20
6 years ago
1.0.19
6 years ago
1.0.17
6 years ago
1.0.16
6 years ago
1.0.15
6 years ago
1.0.14
6 years ago
1.0.13
6 years ago
1.0.12
6 years ago
1.0.11
6 years ago
1.0.10
6 years ago
1.0.9
6 years ago
1.0.8
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago