shapla-react-confirm-dialog v1.0.0

React Confirm Dialog

A simple confirm modal/dialog based on modal component for React

Table of contents

• Installation
• Usage

Installation

npm install --save shapla-react-confirm-dialog

Usage

Note

Use only one 'DialogContainer' component in the app.

Styles

with Sass:

import 'shapla-react-confirm-dialog/src/index.scss';

with CSS:

import 'shapla-react-confirm-dialog/dist/confirm-dialog.css';

Javascript Instantiation

import React from 'react';
import {DialogContainer, Dialog} from 'shapla-react-confirm-dialog';
 
class MyApp extends React.Component {
  constructor(props) {
    super(props);

    this.openConfirmModal = this.openConfirmModal.bind(this);
    this.openAlertModal = this.openAlertModal.bind(this);
  }

  openConfirmModal() {
    Dialog.confirm('Are you sure to delete the item?').then(confirm => {
      if (confirm) {
        console.log('Confirmed');
      }
    });
  }

  openAlertModal() {
    Dialog.alert({message: 'You need to click Ok button to close it.', title: 'Simple Alert'});
  }

  render() {
    return (
      <div className="admin-app p-8">

        <div className='space-x-4'>
          <button className='shapla-button m-2' onClick={this.openConfirmModal}>Confirm It</button>
          <button className='shapla-button m-2' onClick={this.openAlertModal}>Simple Alert</button>
        </div>

        <DialogContainer/>
      </div>
    )
  }
}

Notify API

• Dialog.alert(message);
• Dialog.confirm(message);

Both alert and confirm can accept String for the message or Object with following props.