Skip to content
Home » How to Create Emoji-Picker React JS | React JS Projects

How to Create Emoji-Picker React JS | React JS Projects

Emoji-Picker-React-JS

Hey React Developers, In this Post we will be Creating a Emoji-Picker Using React JS, This is a Good For React Beginner to Practise & Master React JS. So Let’s Start With our Today’s Emoji-Picker Project But, Before Moving On If you Have Not Accessed React JS Interview Questions (with SOLUTION) Check it Out.

Create a New React App

npx create-react-app emoji-picker

Module Installation

Install the Emoji Picker React Module:

npm i emoji-picker-react

Folder Structure of the App

image 4

You Might Also Like: React vs Angular | Which One You Should Go For?

In the Folder go to App.js File & Copy-Paste the Following Code, Make Sure You Have Installed the React Module Mentioned Above.

import React from 'react'
import Emoji from './components/Emoji'

  function App() {
  
    return (
      <>
        <Emoji/>
      </>
    );  
  }

export default App;   

Now the Next Step is After you have Added the Code, Then as you can see we have imported Emoji From a Component Which we have created. So Make Sure to Make a Folder Called Components>>Emoji.js And Paste the Following Code:

import React, { useState } from 'react';
import Picker from 'emoji-picker-react';

export default function Emoji(){
const [chosenEmoji, setChosenEmoji] = useState(null);

const onEmojiClick = (event, emojiObject) => {
	setChosenEmoji(emojiObject);
};

return (
	<div>
	<h3>Emoji Picker</h3>
	{chosenEmoji ? (
		<span>Your Emoji: {chosenEmoji.emoji}</span>
	) : (
		<span>No Emoji</span>
	)}
	<Picker onEmojiClick={onEmojiClick} />
	</div>
);
};

So Here is How Our Emoji Picker App will be Looking Like This:

image 5

So this was it for this Blog See you In the Next One Till then Keep Coding Keep Exploring!

You Might Also Like: React vs React Native | What is the Difference?

Leave a Reply

Your email address will not be published. Required fields are marked *

You cannot copy content of this page

Top 10 Programming Languages to Learn In 2023! 9 Best Extensions For Web Developers! | Chrome Extensions For Web Developers Web Development Roadmap Best Resources to Learn PYTHON FREE! Web Vs App Development- Which one is Better?