v6.0.0

Release notes

🚀 Features

• Allow disabling boundaries check
• Allow to disable preventDefault on key down
• Add support for hidden property to Separator
• Add visual feedback when the item is clicked
• Easy customization thanks to CSS variables. Check out the theme builder
• Keyboard shortcut made easy! A keyMatcher prop has been added to the Item component. See it in action
• Size decreased from 3.4K to 3.1K 🎉

🕷 Bugfixes

• fix close animation flash #218 #219
• fix boundaries check when repositioning menu #163
• fix submenu offscreen #203

💥 Breaking changes

• removal of theme and animation constants
• The show method exposed by the useContextMenu hook uses the same signature as contextMenu. It only accepts a single parameter now.

const {show} = useContextMenu({id: "menuId"})

// ⛔️ Before
show(e, {props: {}})

// ✅ Now
show({ event: e, props: {}})

• The onShow and onHidden callback have been removed in favor of a single callback onVisibilityChange

const handleVisibilityChange = (isVisible: boolean) => {
  console.log(isVisible)
}

<Menu id="menuId" onVisibilityChange={handleVisibilityChange}>
  <Item>Item 1</Item>
</Menu>

• Shorten path to import the stylesheet

// ⛔️ Before
import "react-contexify/dist/ReactContexify.css"

// ✅ Now
import "react-contexify/ReactContexify.css"

• Drop support for webpack 4 (CRA v4)

• css classes have been renamed, please check how to style for the list