Components - Confirm

Confirm component can be used to display an awaitable confirmation UI. Main advantage to use confirm is that it allows you to display UI and then await on user action so that you can take action based on user input.

Props

title: string; => Dialog Title
submitLabel?: string; => Submit Label
cancelLabel?: string; => Cancel Label
children: React.ReactNode; => Content of Dialog
valid?: () => boolean; => Custom validation function for Prompt UI

Usage

Confirm component is made up of a Provider and a hook.

ConfirmProvider context is used to display a global Modal view on demand.
useConfirm is the hook that provides functionality to display UI

confirm

Can be used to re-confirm user action.

// in component
const { confirm } = useConfirm();
 
// somewhere in event handler
const result = await confirm({
  title: `Confirm ${action}`,
  children: `Are you sure you want to ${action} item?`,
});
// or
const delResult = await confirm({
  title: `Delete ${itemName}?`,
  children: (
    <div>
      Are you sure you want to <span className="text-red-500">delete</span> <b>{itemName}</b>?
    </div>
  ),
  submitLabel: 'Delete',
  primaryButtonClassName: 'bg-red-800 text-red-100',
});
if (!delResult) {
  return;
}

// in component
const { confirm } = useConfirm();
 
// somewhere in event handler
const result = await confirm({
  title: `Confirm ${action}`,
  children: `Are you sure you want to ${action} item?`,
});
// or
const delResult = await confirm({
  title: `Delete ${itemName}?`,
  children: (
    <div>
      Are you sure you want to <span className="text-red-500">delete</span> <b>{itemName}</b>?
    </div>
  ),
  submitLabel: 'Delete',
  primaryButtonClassName: 'bg-red-800 text-red-100',
});
if (!delResult) {
  return;
}

alert

Can be used to alert user.

const { alert } = useConfirm();
 
// if item exists let user know and exit
if (existingItem) {
  await alert({
    title: 'Iteme already exists',
    children: `Item ${itemName} already exists.`,
    confirmLabel: 'OK',
  });
  return;
}

const { alert } = useConfirm();
 
// if item exists let user know and exit
if (existingItem) {
  await alert({
    title: 'Iteme already exists',
    children: `Item ${itemName} already exists.`,
    confirmLabel: 'OK',
  });
  return;
}

Prompt

Can be used to prompt user for an input before taking action. Prompt requires you to define item

const { prompter } = useConfirm();
const nameRef = useRef(item?.name || '');
const handleNameChange = useCallback(({ target: { value } }) => {
  nameRef.current = value;
}, []);
const result = await prompter({
  title: 'Enter Name',
  label: 'Item Name',
  value: nameRef.current,
  onChange: handleNameChange,
  placeholder: 'name of item',
  children: undefined,
  valid: () => !!nameRef.current,
});

const { prompter } = useConfirm();
const nameRef = useRef(item?.name || '');
const handleNameChange = useCallback(({ target: { value } }) => {
  nameRef.current = value;
}, []);
const result = await prompter({
  title: 'Enter Name',
  label: 'Item Name',
  value: nameRef.current,
  onChange: handleNameChange,
  placeholder: 'name of item',
  children: undefined,
  valid: () => !!nameRef.current,
});