Emoji Picker
A react project that implements a pop-up emoji picker. 😄
Experience
I made the following additions to the project.
1. EmojiPicker
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.
2. TetherComponent
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.
3. Redux Action
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.