You should be able to write the React context menu pretty much on your own. All of the required React patterns have been explained, and implementing the mutations should be clear by now.
Before we begin, we will lay out the plan that we want to follow:
- Rendering a simple icon with FontAwesome
- Building React helper components
- Handling the onClick event and setting the correct component state
- Using the conditional rendering pattern to show the drop-down menu, if the component state is set correctly
- Adding buttons to the menu and binding mutations to them
Continue reading to find out how to get the job done.
The following is a preview screenshot, showing how the final implemented feature should look:
source: https://www.vecteezy.com/
We will now start with the first task of setting up FontAwesome for our project.