useMenuContext

Hook to access the nearest Menu compound-component context

Import

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

Usage

Use this hook to build a custom part rendered inside Menu.Root.

function CloseMenuButton() {
  const { menu } = useMenuContext();

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

The hook throws when there is no surrounding Menu.Root.

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`