Aditional Settings

In order to customize your dialog you can easily change some properties if needed.

Simple Dialog Container

Properties

Property	Type	Required	Default	What it does
primaryColor	string	true	rgb(3 105 161)	The primary color (use only for button)
primaryHoverColor	string	false	rgb(2 132 199)	Ths primary hover color

Example

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

function App() {
  return (
    <SimpleDialogContainer primaryColor="#d1691c" primaryHoverColor="#b56429" />
  )
}

Alert Dialog

Properties

Property	Type	Required	Default	What it does
message	string	true		The alert message
title	string	false	Attention	Change the dialog title
closeLabel	string	false	Close	Change the close buttom text

Example

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

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

  console.log('Alert closed')
}

Confirm Dialog

Properties

Property	Type	Required	Default	What it does
message	string	true		The alert message
title	string	false	Attention	Change the dialog title
cancelLabel	string	false	Cancel	Change the cancel buttom text
confirmLabel	string	false	Confirm	Change the confirm buttom text

Example

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

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. 🥲')
  }
}

Prompt Dialog

Properties

Property	Type	Required	Default	What it does
message	string	true		The alert message
title	string	false	Attention	Change the dialog title
cancelLabel	string	false	Cancel	Change the cancel buttom text
confirmLabel	string	false	Confirm	Change the confirm buttom text
inputLabel	string	false	Value	Change the dialog input label

Example

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

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. 🥲')
  }
}