React Simple Dialogs

Beautiful dialogs with a simple usage. No unnecessary settings, native-like usage, simple. You can make it work in less than 10 seconds!

📖 Documentation

✨ Examples

🏗️ Instalation

# npm
npm install react-simple-dialogs
# yarn
yarn add react-simple-dialogs
# pnpm
pnpm add react-simple-dialogs

Container

In order to correctly render the dialogs, you must place the SimpleDialogContainer near to your root component.

Example

import React from 'react'

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

function App() {
  const alert = () => simpleAlert('Easy peasy lemon squeezy!')

  return (
    <div>
      <button onClick={alert}>Alert!</button>
      <SimpleDialogContainer />
    </div>
  )
}

💡 Simple Usage

Using the dialogs is almost like using the native dialogs function (alert, confirm and prompt).

All dialog function will return an Promise that only resolves when the user interacts with the dialog, so you can wait for the user interaction to continue your code execution.

Alert Dialog

import { simpleAlert } from 'react-simple-dialogs'

const showAlert = async () => {
  await simpleAlert("You can't do this right now.")

  console.log('Alert closed')
}

Confirm Dialog

import { simpleConfirm } from 'react-simple-dialogs'

const showConfirmation = async () => {
  if (await simpleConfirm('Please confirm something')) {
    console.log('Confirmed! 😄')
  } else {
    console.log('Not confirmed. 🥲')
  }
}

Prompt Dialog

import { simplePrompt } from 'react-simple-dialogs'

const showPrompt = async () => {
  const name = await simplePrompt('Please inform your name')

  console.log(`User name is ${name || 'a mistery'}`)
}

Modal Dialog

import { simpleModal } from 'react-simple-dialogs'

const showPrompt = async () => {
  await simpleModal(closeFn => (
    <div>
      <h1>My modal</h1>

      <p>My modal content, I can use this for anything I want!</p>

      <button onClick={closeFn}>Close</button>
    </div>
  ))

  console.log('Modal was closed')
}