Practice React (1): Emoji Site

Emojis are funny, React is famous, Tailwind CSS is useful. I combined them and created a site where you can copy emojis and also filter them by category. Source code link is provided at the bottom of this article.

Screenshot

Stack

React.js : JavaScript library for front-end development

Tailwind : CSS framework to style elements

Emoji API : I am using this API to get the emojis and categories.

Let’s Setup The Project

Go to your terminal and type →

Note that I am using yarn just because I prefer it. But npm is also fine.

Setup Tailwind

To use tailwind classes inside our react components we need to install some packages. I am following the guide from official tailwind docs (view guide). Run these commands from your terminal →

Once the installations are done, update "scripts" in package.json file to use “craco” instead of default “react-scripts”.

Create a new file at the root of your project and name it craco.config.js and add this inside the new file →

Again go back to your terminal and run this command →

This will create a minimal tailwind.config.js file in the root of the project. Inside this newly created file find the line with “purge” and change the line like this →

Finally, to use tailwind style classes go to src/index.css file and replace the file’s content with this →

Hurray! Tailwind is ready to go along with React.

Setup Emoji API

Go to this site → https://emoji-api.com/ and get your api key for free. After you get your API key, create a new file in root of the project and name it .env and add this in the file →

Our project setup is now complete. Time for some coding …..

Let’s Code

We will go from bottom to top in our coding approach. We have three sections in our site - sidebar, emoji menu and emoji card. Note that our site will be completely responsive which means when we are in mobile view the sidebar will collapse and user can toggle it with a menu button.

Emoji Card

Create a new folder inside src folder and name it components and add EmojiCard.js file inside the components folder. Inside the EmojiCard.js file we will add the code to render individual emoji card. Add this in EmojiCard.js file →

Nothing very special there. We have arrow function to copy value to the clipboard. Whenever “copy” text gets clicked the function will be called. And we have some tailwind classes for styling purpose.

Emoji Menu

We have coded the emoji card component which will render a emoji that is passed to it. To manage many emoji cards at once, we need a parent component. Create a new file inside src/components folder and name it EmojiMenu.js →

EmojiMenu component uses useState hook to save the an array of emoji data together. On line 7 I have apiUrl variable which is API endpoint to get emojis. I have added the category and the API key inside the string. The category name will passed to it via another parent component and the API key is available to us via .env file.

Next we have getEmojiArray function which will take a url, fetch data from the passed url, convert the data to json and save it to emojiArrayState. I have used if-else because some of the categories will have no emojis and the API will simply return null(the API is in development I guess). If data is returned then the the emojiArray state will be set with the data, else if null is returned the emojiArray state will be set to empty array.

Next we adde useEffect hook to call getEmojiArray whenever apiUrl is changed. To learn more about useEffect hook check this out : https://reactjs.org/docs/hooks-effect.html

Then finally we have return statement which returns some data inside div block. At the last line we have exported our EmojiMenu component.

To see this component in action, go to src/App.js file and replace its content with this →

If you now go to your terminal and start up the server with yarn start command or npm start if you’re using npm, and go to the browser you can view the data that is mentioned in EmojiMenu component. Also check the console tab, there you will have an array of json data for the emojis.

Good so far, but we need to render the emojis on the page. Go back to EmojiMenu.js file edit like this →

I have added a new function above return block. renderEmojiCards function will take each emoji from emojiArray and return a emojiCard component. Inside the return block I have added some styling to our div class. Then inside the div I have added the code that will call the renderEmojiCards function if emojiArray is not empty, but if the emojiArray is empty then it will simply show the text “Nothing To Show”. If you’re confused with the code syntax then check this : click . Now run your server and view the modified page →

Side Bar

Currently we have are passing the name of the category to EmojiMenu component manually. But we need to change this automatically whenever user clicks on a different category. Create a new file inside src/components folder and name it CategoryBar.js →

Inside the CategoryBar component we will be passing two props- one is the name of the category and another prop is a function to change the category in parent component’s state. Just like we fetched the data in EmojiMenu component, here also we are fetching the categories from API with the help of getCategories function and rendering those on the page with the renderCategories function.

Time to bunch up everything. I have done the styling for the sidebar by watching a video on youtube. Video link → click me

Back to our code. Open src/App.js and replace its content with this →

Yeah I know the code looks really ugly. The main reason for that is the svg icons that I have added. I have copied them from HeroIcons page. One main part is how I have added code inside one div’s className to include a specific class based on sidebarOpen state. If you watched the video I provided, you’ll understand why I did that.

Congratulations! If you run the server from terminal, you will get the page exactly like I mentioned at the start of this article. You can copy emoji by clicking on the copy text, and you can also filter emoji based on a specific category. Try reducing the screen size and you’ll see a navbar appearing at the top from where you can toggle the sidebar. If you’re having any problem related to code go to the source code link :

Source Code (GitHub) → https://github.com/akhtersoyeb/emoji-site

If you find articles like this valuable and want to support this type of content, consider signing up to Medium, You will get unlimited access to all articles from thousands of authors. I appreciate your support. Made with ❤️ by Sk Soyeb Akhter.