Return object

This Hook returns an object of the following shape:

{

buttonProps: {

onKeyDown: (e: React.KeyboardEvent | React.MouseEvent) => void;

onClick: (e: React.KeyboardEvent | React.MouseEvent) => void;

tabIndex: 0;

ref: React.RefObject<HTMLButtonElement>;

role: 'button';

'aria-haspopup': true;

'aria-expanded': boolean;

};

itemProps: [

{

onKeyDown: (e: React.KeyboardEvent<HTMLAnchorElement>) => void;

tabIndex: -1;

role: 'menuitem';

ref: React.RefObject<HTMLAnchorElement>;

};

...

];

isOpen: boolean;

setIsOpen: (newValue: boolean) => void;

moveFocus: (itemIndex: number) => void;

}

• buttonProps: An object meant to be spread as properties on a <button /> element.
  • onKeyDown: A function which manages the behavior of your dropdown menu when a key is pressed while focused on the menu button.
  • onClick: The same function as onKeyDown(), but its behavior differs somewhat for click events.
  • tabIndex: Sets the tab index property of the <button /> element.
  • ref: A React ref applied to the <button /> element, used to manage focus.
  • role: A role property in accordance with WAI-ARIA guidelines.
  • aria-haspopup: An ARIA attribute indicating this button has a related menu element.
  • aria-expanded: An ARIA attribute indicating whether the menu is currently open.
• itemProps: An array of objects meant to be spread as properties on <a /> elements that serve as menu items in your dropdown.
  • onKeyDown: A function which manages the behavior of your dropdown menu when a key is pressed while focused on a menu item.
  • tabIndex: Sets the tab index property to -1 to prevent the browser’s native focusing logic. Focus is managed programatically by this Hook.
  • role: A role property in accordance with WAI-ARIA guidelines.
  • ref: A React ref applied to each menu item, used to manage focus.
• isOpen: A boolean value indicating if the menu is open or closed. The developer should use this value to make the menu visible or not.
• setIsOpen: A function useful for allowing the developer to programmatically open/close the menu.
• moveFocus: A function that moves the browser’s focus to the specified item index.