-
Notifications
You must be signed in to change notification settings - Fork 57
Migration from v2 to v3
v2 document link: https://szhsin.github.io/react-menu-v2/
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.
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.
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.
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);
No need to call applyHOC
or applyStatics
.
const enhance = (WrappedComponent) => {
...
};
- const MyMenuItem = applyHOC(enhance)(MenuItem);
+ const MyMenuItem = enhance(MenuItem);
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>
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>
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
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.
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.