useConfirmPopup

Hook that manages confirm popup state, outside click dismissal, escape key handling, and focus management.

basic-demo

Usage#

import { useConfirmPopup } from '@primereact/headless/confirmpopup';
import { usePortal } from '@primereact/headless/portal';
import { usePositioner } from '@primereact/headless/positioner';
import { createPortal } from 'react-dom';
 
const { triggerProps, popupProps, positionerProps, closeProps, state, popover } = useConfirmPopup();
const portal = usePortal();
 
usePositioner({
    anchor: state.anchorElement,
    content: state.positionerElement,
    arrow: state.arrowElement,
    side: 'bottom',
    sideOffset: 12
});
 
return (
    <>
        <button {...triggerProps}></button>;
        {
            portal.state.mounted &&
                state.open &&
                createPortal(
                <div {...positionerProps} ref={popover?.setPositionerRef}>
                    <div {...popupProps} ref={popover?.setPopupRef}>
                        <span></span>
                        <button {...closeProps}></button>
                        <button {...closeProps}></button>
                    </div>
                </div>,
                document.body
            );
        }
    </>
)

useConfirmPopup wraps usePopover with an alertdialog role and a close() method for confirm/cancel actions. Use usePositioner for anchor-relative positioning and usePortal with createPortal for body portaling — see Primitive for a component-based API.

Features#

popupProps includes role="alertdialog" and data-open/data-closed attributes automatically
closeProps returns spread-ready click handler for action buttons
close() method for imperative dismissal
Inherits popover behavior: outside click dismissal, escape key handling, and optional focus trapping

Behavior#

Default Open#

Set defaultOpen for uncontrolled confirm popup state.

const confirmpopup = useConfirmPopup({ defaultOpen: true });

Controlled#

Pass open and onOpenChange for controlled usage.

const [isOpen, setIsOpen] = React.useState(false);
 
const confirmpopup = useConfirmPopup({
    open: isOpen,
    onOpenChange: (e) => setIsOpen(e.open)
});

Close on Escape#

Set closeOnEscape to close the confirm popup when the Escape key is pressed. Enabled by default.

const confirmpopup = useConfirmPopup({ closeOnEscape: true });

Custom Styling with Data Attributes#

[data-scope='popover'][data-part='popup'][data-open] {
    opacity: 1;
}
[data-scope='popover'][data-part='trigger'][data-open] {
    background-color: light-dark(var(--p-surface-100), var(--p-surface-700));
}

API#

useConfirmPopup#

Name	Type	Default
`defaultOpen`	`boolean`	`undefined`
Whether the popover is open by default.
`open`	`boolean`	`undefined`
Whether the popover is open.
`trapped`	`boolean`	`false`
When enabled, focus is trapped within the popover (modal behavior). When disabled, focus leaving the popover closes it (non-modal behavior).
`autoFocus`	`boolean`	`true`
Whether to focus the first focusable element when the popover is opened.
`closeOnEscape`	`boolean`	`true`
Specifies if pressing escape key should hide the dialog.
`onOpenChange`	`(event: usePopoverOpenChangeEvent) => void`	`undefined`
Callback to invoke when the open state changes.
`appendTo`	`"body"` \| `HTMLElement` \| `"self"`	`'body'`
DOM element or CSS selector to append the overlay to.

Accessibility#

See ConfirmPopup Primitive for WAI-ARIA compliance details and keyboard support.