useConfirmDialog

Category

Utilities

Export Size

429 B

Last Changed

5 days ago

Creates event hooks to support modals and confirmation dialog chains

Demo

Functions and hooks

• reveal() - triggers onReveal hook and sets isRevealed to true. Returns promise that resolves by confirm() or cancel().
• confirm() - sets isRevealed to false and triggers onConfirm hook.
• cancel() - sets isRevealed to false and triggers onCancel hook.

Basic Usage

Using hooks

The returned onReveal / onConfirm / onCancel are stable registration functions following the useListener protocol — each accepts a callback and returns the off function that unsubscribes it, so listeners never leak and never fire after the component unmounts:

import { useConfirmDialog } from '@reause/core'
import { useListener } from '@reause/shared'

const { isRevealed, reveal, confirm, cancel, onReveal, onConfirm, onCancel }
  = useConfirmDialog()

useListener(onReveal, () => {
  // modal shown
})

function Component() {
  return (
    <>
      <button type="button" onClick={() => reveal()}>
        Reveal Modal
      </button>

      {isRevealed && (
        <div className="modal-bg">
          <div className="modal">
            <h2>Confirm?</h2>
            <button type="button" onClick={() => confirm()}>
              Yes
            </button>
            <button type="button" onClick={() => cancel()}>
              Cancel
            </button>
          </div>
        </div>
      )}
    </>
  )
}

Promise

If you prefer working with promises:

import { useConfirmDialog } from '@reause/core'

const {
  isRevealed,
  reveal,
  confirm,
  cancel,
} = useConfirmDialog()

async function openDialog() {
  const { data, isCanceled } = await reveal()
  if (!isCanceled)
    console.log(data)
}

useConfirmDialog accepts an optional React ref source (RefObject<boolean>, e.g. the result of useRef) that the controls keep in sync — mirroring upstream's optional shallowRef parameter. When omitted, the revealed state is internal:

import { useConfirmDialog } from '@reause/core'
import { useRef } from 'react'

const show = useRef(false)
const { isRevealed, reveal, confirm, cancel } = useConfirmDialog(show)

Type Declarations

export type UseConfirmDialogRevealResult<C, D> = {
    data?: C;
    isCanceled: false;
} | {
    data?: D;
    isCanceled: true;
}

export interface UseConfirmDialogReturn<RevealData, ConfirmData, CancelData> {
    isRevealed: boolean;
    reveal: (data?: RevealData) => Promise<UseConfirmDialogRevealResult<ConfirmData, CancelData>>;
    confirm: (data?: ConfirmData) => void;
    cancel: (data?: CancelData) => void;
    onReveal: (fn: (data: RevealData) => void) => () => void;
    onConfirm: (fn: (data: ConfirmData) => void) => () => void;
    onCancel: (fn: (data: CancelData) => void) => () => void;
}

export function useConfirmDialog<RevealData = any, ConfirmData = any, CancelData = any>(revealed?: RefObject<boolean>): UseConfirmDialogReturn<RevealData, ConfirmData, CancelData>

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.7 on

534c2 - refactor(shared)!: return the off function from listener registrars

v0.1.0 on

f0498 - fix(core): resolve useConfirmDialog audit findings (#533)

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)