A react project that implements a pop-up emoji picker. 😄
I made the following additions to the project.
The EmojiPicker React component consists of the following three sections:
- Category Row section shows the list of categories of emojis.
- Emojis section shows all the emojis from the selected category.
- Tooltip section displays the name of emoji (or catrgory) on mouse hover.
All emoji data was taken from emojis.js.
I added CSS styling in App.css to maintain consistency because it already had styling for other components. Although, my preferred way of adding CSS in a React project is CSS Modules.
I used TetherComponent from react-tether library to display pop-up on button click. TetherComponent renders the EmojiPicker React component. This library was new to me and I had to look up examples on how to attach a component inside the pop-up. The implementation turned out to be pretty simple and straight-forward.
I added a new Redux action togglePicker to open or close the pop-up based on displayPicker variable in Redux store.
I chose to implement this functionality using Redux and not using local state. This is because the action of closing the pop-up can be performed from more than one component. In current implementation, the pop-up can be closed from two components - by clicking the CLICK ME button and whenever an emoji is selected. We can add more ways of opening/closing the pop-up such as pressing a specific key combination or clicking outside the pop-up when it is open.