Simple Universal Dialog Component For React

Description:

An easy yet fully configurable dialog component to create alert/prompt/confirm dialogs in your React apps.

How to use it:

1. Install and import the dialog component.

# Yarn
$ yarn add react-simple-dialogs
# NPM
$ npm i react-simple-dialogs

import React from 'react'
import { 
  SimpleDialogContainer, 
  simpleAlert,
  simpleConfirm,
  simplePrompt
} from 'react-simple-dialogs'

2. Create an alert dialog.

const showAlert = async () => {
  await simpleAlert({
    message: "You can't do this right now.",
    closeLabel: 'Ok, now close this',
    title: "Oops..."
  })
  console.log('Alert closed')
}

3. Create a confirmation dialog.

const showConfirmation = async () => {
  if (
    await simpleConfirm({
      title: "Hey!",
      message: "You must accept before continue",
      confirmLabel: 'Ok, I accept.',
      cancelLabel: 'No, cancel this'
    })
  ) {
    console.log('Confirmed! 😄')
  } else {
    console.log('Not confirmed. 🥲')
  }
}

4. Create a prompt dialog.

const showConfirmation = async () => {
  if (
    await simplePrompt({
      title: "We need something",
      message: "You must enter your name in order to continue",
      confirmLabel: "That's my name!",
      cancelLabel: 'No, cancel this',
      inputLabel: 'Your Name'
    })
  ) {
    console.log('Confirmed! 😄')
  } else {
    console.log('Not confirmed. 🥲')
  }
}

Preview: