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.