useOptionalMenuContext

Hook to access a Menu context when one is available

Import

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

Usage

Use the optional hook when a component can work both inside and outside Menu.Root.

function MenuAwareLabel() {
  const menu = useOptionalMenuContext();

  return <span>{menu ? "Nested in a menu" : "Standalone"}</span>;
}

It returns null instead of throwing when no menu context is available.

API Reference

Return Value

Property	Type	Details
`core`	`MenuCore`
`menu`	`object`
Type { input: State<MenuInput>; triggerProps: MenuTriggerProps; contentProps: MenuContentProps; triggerElement: HTMLElement \| null; contentElement: HTMLElement \| null; popupElement: HTMLElement \| null; setTriggerElement: ((element: HTMLElement \| null) => void); setContentElement: ((element: HTMLElement \| null) => void); setPopupElement: ((element: HTMLElement \| null) => void); registerItem: ((element: HTMLElement) => (() => void)); registerSubmenu: ((menu: MenuApi) => (() => void)); highlight: ((element: HTMLElement \| null, options?: MenuHighlightOptions) => void); highlightFirstItem: ((options?: MenuHighlightOptions) => void); restoreFocus: ((options?: FocusOptions) => void); open: ((reason?: MenuOpenChangeReason) => void); close: ((reason?: MenuOpenChangeReason) => void); syncOpen: ((open: boolean) => void); destroy: (() => void) }
`parent`	`object`
Type `{ core: MenuCore; menu: MenuApi; parent: MenuContextValue \| null; state: MenuState; preferredSide: MenuState['side']; setPositionedSide: ((side: MenuState['side']) => void); contentId: string; anchorName: string; boundary: PositioningBoundary; container: MediaContainer \| null } \| null`
`state`	`MenuState`
`preferredSide`	`MenuState['side']`
`setPositionedSide`	`function`
Type `((side: MenuState['side']) => void)`
`contentId`	`string`
`anchorName`	`string`
`boundary`	`'viewport' \| 'container' \| string & o...`
Type `'viewport' \| 'container' \| string & object \| Element \| null \| undefined`
`container`	`object \| null`