cue

Typed props

Pass data into an overlay when you open it.

Give createOverlay a props generic. TypeScript then requires those props on open().

Example

export const confirmDeleteDialog = createOverlay<{
  organizationName: string;
}>((props) => (
  <Dialog {...props} title={`Delete ${props.organizationName}?`}>
    <button type="button" onClick={() => confirmDeleteDialog.close()}>
      Cancel
    </button>
  </Dialog>
));

confirmDeleteDialog.open({
  organizationName: "Helios",
});

OverlayProps (open, onOpenChange) are always injected. Your generic only describes the extra fields.

Default

Register a dialog and open it with no extra props.

Stacking

Open an overlay from another overlay.

On this page

Example