useConfirm

Shows a dialog for the users to confirm an action.

This hook may be used instead of manually rendering a confirmation dialog using the Dialog component.

The rendered dialog uses the ConfirmationDialog component.

Examples

Default

import React from 'react'
import {useConfirm} from '@primer/react'


export default function Default() {
  const [isUsingPrimer, setIsUsingPrimer] = React.useState(true)
  const confirm = useConfirm()
  const confirmStopUsingPrimer = React.useCallback(async () => {
    if (await confirm({title: 'Are you sure?', content: 'Using Primer is cool and fun.'})) {
      setIsUsingPrimer(false)
    }
  }, [confirm])
  const handleStartUsingPrimer = () => {
    setIsUsingPrimer(true)
  }


  return (
    <button onClick={isUsingPrimer ? confirmStopUsingPrimer : handleStartUsingPrimer}>
      {isUsingPrimer ? 'Stop' : 'Start'} using Primer
    </button>
  )
}

import React from 'react'
import {useConfirm} from '@primer/react'

export default function Default() {
  const [isUsingPrimer, setIsUsingPrimer] = React.useState(true)
  const confirm = useConfirm()
  const confirmStopUsingPrimer = React.useCallback(async () => {
    if (await confirm({title: 'Are you sure?', content: 'Using Primer is cool and fun.'})) {
      setIsUsingPrimer(false)
    }
  }, [confirm])
  const handleStartUsingPrimer = () => {
    setIsUsingPrimer(true)
  }

  return (
    <button onClick={isUsingPrimer ? confirmStopUsingPrimer : handleStartUsingPrimer}>
      {isUsingPrimer ? 'Stop' : 'Start'} using Primer
    </button>
  )
}

Customized dialog buttons

Confirm and cancel button labels can be customized, and the confirm button style variant can be customized.

import React from 'react'
import {useConfirm} from '@primer/react'


export default function CustomDialogButtons() {
  const [isUsingPrimer, setIsUsingPrimer] = React.useState(true)
  const confirm = useConfirm()
  const confirmStopUsingPrimer = React.useCallback(async () => {
    if (
      await confirm({
        title: 'Are you sure?',
        content: 'Using Primer is cool and fun.',
        cancelButtonContent: 'No',
        confirmButtonContent: 'Yes',
        confirmButtonType: isUsingPrimer ? 'danger' : 'primary',
      })
    ) {
      setIsUsingPrimer(false)
    }
  }, [confirm, isUsingPrimer])
  const handleStartUsingPrimer = () => {
    setIsUsingPrimer(true)
  }


  return (
    <button onClick={isUsingPrimer ? confirmStopUsingPrimer : handleStartUsingPrimer}>
      {isUsingPrimer ? 'Stop' : 'Start'} using Primer
    </button>
  )
}

import React from 'react'
import {useConfirm} from '@primer/react'

export default function CustomDialogButtons() {
  const [isUsingPrimer, setIsUsingPrimer] = React.useState(true)
  const confirm = useConfirm()
  const confirmStopUsingPrimer = React.useCallback(async () => {
    if (
      await confirm({
        title: 'Are you sure?',
        content: 'Using Primer is cool and fun.',
        cancelButtonContent: 'No',
        confirmButtonContent: 'Yes',
        confirmButtonType: isUsingPrimer ? 'danger' : 'primary',
      })
    ) {
      setIsUsingPrimer(false)
    }
  }, [confirm, isUsingPrimer])
  const handleStartUsingPrimer = () => {
    setIsUsingPrimer(true)
  }

  return (
    <button onClick={isUsingPrimer ? confirmStopUsingPrimer : handleStartUsingPrimer}>
      {isUsingPrimer ? 'Stop' : 'Start'} using Primer
    </button>
  )
}

API

Loading data for useConfirm...

Dialog