v4.md

Migrating to v4

React-Menu v4.0.0 has reduced its package bundle size by around 10%. It's also shipped with a few API optimisations which introduced BREAKING changes as below:

The new gap and shift props

These two props on menu components have replaced the old offsetX and offsetY props. When adjusting a menu's position relating to its anchor element, the new props will take into account the menu's placing direction.

Let's say you want to create a 10-pixel gap between a menu and its anchor, you had to apply either offsetX or offsetY based on directions of the menu:

<Menu
  offsetX={direction === 'left' || direction === 'right' ? 10 : 0}
  offsetY={direction === 'top' || direction === 'bottom' ? 10 : 0}
/>

Using the new props, you can simply specify the gap value:

<Menu gap={10} />

The same benefit applies to the shift prop.

The new arrowProps prop

This new prop on menu components have replaced the old arrowClassName and arrowStyle props. arrowProps can be used to pass any attributes or events onto the arrow element of a menu.

If you have used the old props to apply styling to arrow elements as below:

<Menu
  arrowClassName="my-custom-arrow"
  arrowStyle={{ backgroundColor: 'blue' }}
/>

Using the new arrowProps, the updated code would be:

<Menu
  arrowProps={{
    className: 'my-custom-arrow',
    style: { backgroundColor: 'blue' }
  }}
/>

Dropping ES5 support

To align with most libraries within the React ecosystem, the package distribution files have been transpiled to target ES6+. If you still need to support older environments such as IE 11, you need to config your bundling process to transpile this package in node_modules into ES5 code. Here is an example for webpack/babel configuration.