useMenuTriggerState
Manages state for a menu trigger. Tracks whether the menu is currently open, and controls which item will receive focus when it opens. Also tracks the open submenus within the menu tree via their trigger keys.
| install | yarn add react-stately |
|---|---|
| version | 3.33.1 |
| usage | import {useMenuTriggerState} from 'react-stately' |
API#
useMenuTriggerState(
(props: MenuTriggerProps
)): RootMenuTriggerState
Interface#
Properties
| Name | Type | Description |
openSubmenu | (
(triggerKey: Key,
, level: number
)) => void | Opens a specific submenu tied to a specific menu item at a specific level. |
closeSubmenu | (
(triggerKey: Key,
, level: number
)) => void | Closes a specific submenu tied to a specific menu item at a specific level. |
expandedKeysStack | Key[] | An array of open submenu trigger keys within the menu tree. The index of key within array matches the submenu level in the tree. |
close | () => void | Closes the menu and all submenus in the menu tree. |
focusStrategy | FocusStrategy | null | Controls which item will be auto focused when the menu opens. |
isOpen | boolean | Whether the overlay is currently open. |
Methods
| Method | Description |
open(
(focusStrategy?: FocusStrategy
| | null
)): void | Opens the menu. |
toggle(
(focusStrategy?: FocusStrategy
| | null
)): void | Toggles the menu. |
setOpen(
(isOpen: boolean
)): void | Sets whether the overlay is open. |
Example#
See the docs for useMenu in react-aria for an example of useMenuTriggerState.