Migration from v1 to v2

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

---

React-Menu v2.0.0 release came with some breaking changes which might need manual intervention if you are updating from v1. Every decision to change has been carefully made in order to response to common community feedbacks or to improve the extendibility of public API in the long term.

This guide documents those changes and actions you might need to take. It intends to help you make a smooth migration to v2.

Component/Hook	Change	Actions to Take
ControlledMenu	Remove isOpen and isMounted prop	Replace the two props with a new state prop; You can provide it with value returned from useMenuState Hook
Menu ControlledMenu	Remove animation prop and add transition prop; default value set to false	If you previously set animation to false to disable it, just remove it from your code If you want to keep the menu opening and closing animations as v1, now you need to explicitly set transition prop to true and import slide.css. See an example
Menu SubMenu	Remove keepMounted prop; add unmountOnClose prop	If you previously set keepMounted to false to unmounted menu from DOM when it's closed, then set unmountOnClose to true on the root menu component
Menu SubMenu ControlledMenu	Rename className prop to menuClassName and styles to menuStyles; It allows to attach className to root container for better working with styled-components	Replacing name of the props in your code should work in most cases
Menu ControlledMenu	Remove deprecated onClick event It's to avoid conflicts with DOM events	Replace it with the new onItemClick event
Menu	Rename onChange event to onMenuChange It's to avoid conflicts with DOM events	Replace the event name if you are using it
MenuRadioGroup	Rename onChange event to onRadioChange It's to avoid conflicts with DOM events	Replace the event name if you are using it
MenuItem	Changed the way to skip subsequent onClick events on root menu to better work with async handlers	Set stopPropagation on event object to true instead of returning false from the event handler. See an example
Stylesheets	Rename css class names from rc-menu-* to szh-menu-*; It's to avoid conflicts with other react libraries	A search and replace from 'rc-menu' to 'szh-menu' of your code base should work in most cases
Stylesheets	Extract sliding animation from index.css into a separate slide.css; It helps reduce bundle size for projects that don't need it	In your code, add import '@szhsin/react-menu/dist/transitions/slide.css';