react-dialog-boxes
v1.0.2
Published
Customisable dialog boxes with promise based interface
Downloads
8
Readme
react_dialog_boxes
Customisable dialog boxes with promise based interface.
Demo
Please visit a web page about this react component. It has demo and thorough description of logic behind this component and the process of coding.
Usage
Take the code
Copy the content of ReactDialogBoxes.js to your project.
Import this component
import Msg from './ReactDialogBoxes';
The component is available on npm so you can do the following as well:
npm install react-dialod-boxes
import Msg from 'react-dialod-boxes';
Use Msg
or other convenient name.
Add this component to the render method of other components
render () {
return (<div className="your-component">
<Msg ref={msg => {this.msg = msg;}}/>
// other code
</div>);
}
Use this component
this.msg.alert('messageText' [,'button text']).then(() => {
// code
});
this.msg.confirm('messageText' [, 'okButtonText', 'cancelButtonText']).then(result => {
// code
});
this.msg.prompt(
'messageText',
['promptPlaceholder',]
['okButtonText',]
['cancelButtonText']
).then(result => {
// code
});
this.showLoader(['Text to show']); // default is "Loading..."
this.hideLoader();
Style this component as you want using css, you can see an example in styles.less.