gem-hunter

react-confirm-alert

Install

npm install react-confirm-alert

Ask a question

import { confirm } from 'react-confirm-alert'
import 'react-confirm-alert/style.css'

if (await confirm({ title: 'Delete file?', message: 'This cannot be undone.', tone: 'danger' })) {
  remove(file)
}

Custom UI

import { DialogLayout, openDialog } from 'react-confirm-alert'

const colour = await openDialog({
  render: ({ close, dismiss }) => (
    <DialogLayout title="Pick a colour" actions={[{ label: 'Cancel', onClick: dismiss }, { label: 'Blue', variant: 'primary', onClick: () => close('blue') }]}>
      <p>Used for the team badge.</p>
    </DialogLayout>
  )
}).result

confirmAlert({
  skin: true,
  customUI: ({ onClose }) => (
    <>
      <h1>Leave the board?</h1>
      <p>You can join again from the invite link.</p>
      <button onClick={onClose}>Stay</button>
    </>
  )
})

3.0 code keeps working

import { confirmAlert } from 'react-confirm-alert'
import 'react-confirm-alert/style.css'

confirmAlert({
  title: 'Confirm to submit',
  message: 'Are you sure to do this.',
  buttons: [
    { label: 'Yes', onClick: () => alert('Click Yes') },
    { label: 'No', onClick: () => alert('Click No') }
  ]
})

Tailwind CSS

@import 'tailwindcss';
@import 'react-confirm-alert/style.css' layer(components);

confirm({ title: 'Publish?', classNames: { button: 'rounded-full bg-red-500' } })

Size

Older versions

License