Designing a Context Menu System
Explore how to design context menu systems within React applications by applying modal management principles. Understand how React portals enable menus to overlay UI correctly, and learn to integrate these with Redux state management. This lesson guides you through the practical use of ReactDOM.createPortal and related tools to implement efficient and visually correct context menus.
We'll cover the following...
Now that we’ve seen how to build a modal dialog system, we can apply the same principles to context menus. A context menu is really just another modal that’s probably absolutely positioned on screen, doesn’t have a dimmer overlay behind it, and contains just a menu instead of a titlebar, content area, and action buttons.
This might be a good time to go back and review a couple of the concepts around how modals in React can actually get shown on screen.
React Portals
We start our React applications by calling ReactDOM.render(<App />, rootElement) ...