useDialogContext

Hook to access the nearest dialog compound-component context

Import

import { useDialogContext } from "@videojs/react";

Use this hook to build a custom part inside Dialog.Root, AlertDialog.Root, or ErrorDialog.Root.

function CustomCloseButton() {
  const { dialog } = useDialogContext();

  return <button onClick={() => dialog.close()}>Close</button>;
}

The hook throws when there is no surrounding dialog root.

Property	Type	Details
`core`	`DialogCore`
`dialog`	`object`
Type `{ input: State<DialogInput>; triggerProps: DialogTriggerProps; open(): void; close(): void; setTriggerElement(el: HTMLElement \| null): void; setPopupElement(el: HTMLElement \| null): void; destroy(): void }`
`state`	`DialogCore.State`
`stateAttrMap`	`{ [Key in keyof State]?: string; }`
`popupId`	`string`