Migration from v2 to v3

v2 document link: https://szhsin.github.io/react-menu-v2/

Introduction

React-Menu v3.0.0 is a major release that comes with a few breaking changes. This guide documents those changes and actions you might need to take. It intends to help you make a smooth migration to v3.

Update React version to 16.14.0 or higher

React-Menu v3 is compiled using the new JSX transform which brings some performance and bundle size improvements. To support the new JSX transform, the minimal React version required is 16.14.0.

NOTE: the code consuming this library can continue to use the old (classic) JSX transform if you choose to do so.

applyStatics and applyHOC removed

Keyboard navigation was re-implemented in v3 which makes it a lot easier to create wrapping components or HOC over MenuItem and SubMenu. As a result of the new implementation, applyStatics and applyHOC are no longer needed so they were removed from the library exports.

For component wrapping

import {
- applyStatics,
  MenuItem
} from "@szhsin/react-menu";

const MyMenuItem = (props) => {
  return (
    <div style={{ border: "2px solid" }}>
      <MenuItem 
-     {...props} // props forwarding or spreading is optional and no longer required
      />
    </div>
  );
};
- applyStatics(MenuItem)(MyMenuItem);

For HOC

No need to call applyHOC or applyStatics.

const enhance = (WrappedComponent) => {
  ...
};
- const MyMenuItem = applyHOC(enhance)(MenuItem);
+ const MyMenuItem = enhance(MenuItem);

Specify type="radio" on radio menu items explicitly

Menu items under a MenuRadioGroup had the type prop set to 'radio' automatically in previous versions. Staring from v3, type="radio" should be explicitly set for a radio menu item.

- <MenuItem value="red">Red</MenuItem>
+ <MenuItem value="red" type="radio">Red</MenuItem>

Specify setDownOverflow on overflowing menu explicitly

In previous versions, menu automatically set overflow amount down to a child MenuGroup which has a takeOverflow prop. Staring from v3, a new setDownOverflow prop should be specified explicitly on menu.

<Menu     
+ setDownOverflow
  overflow="auto">
  <MenuGroup takeOverflow>
      // many menu items causing overflow ...
  </MenuGroup>
</Menu>

useMenuState return value shape changed

The return value of useMenuState hook has changed from an object to an array in v3. This makes it easier to use multiple useMenuState hooks for multiple menus in the same component.

- const { toggleMenu, ...menuProps } = useMenuState({ transition: true });
+ const [menuProps, toggleMenu] = useMenuState({ transition: true });

<ControlledMenu {...menuProps} anchorRef={ref}>
</ControlledMenu>

A complete example can be found at https://szhsin.github.io/react-menu#use-menu-state

Menu item active state removed

The internal, self-managed active state in menu items has been removed to reduce bundle size. The state doesn't offer much value in practice and can be largely replaced by the :active CSS pseudo-class. The hover state will keep working as usual and is not going away.

styles prop removed from all components

The styles prop (a superset of the plain style prop) in all components has been removed to reduce bundle size. The prop doesn't offer much value in practice because inline styles are discouraged for heavy customisations. The style prop will still exist on every component and it will be forwarded directly to internal DOM elements without any processing.