Skip to content

Courses
Tutorials
Practice
Contests

React Tutorial
React Exercise
React Basic Concepts
React Components
React Props
React Hooks
React Router
React Advanced
React Examples
React Interview Questions
React Projects
Next.js Tutorial
React Bootstrap
React Material UI
React Ant Design
React Desktop
React Rebass
React Blueprint
JavaScript
Web Technology

How to create Color Picker in ReactJS ?

How to create Emoji Picker in ReactJS ?

Last Updated : 29 Jul, 2024

Comments

Improve

Suggest changes

Like Article

Like

Report

Emojis have become an essential part of modern communication, adding a touch of emotion and fun to our messages and applications. In this article, we will explore how to create an Emoji Picker using ReactJS, allowing users to easily select and insert emojis into their text inputs or text areas.

Prerequisites:

NPM & Node.js
React JS

Approach:

To create our Spreadsheet we are going to use the emoji-picker-react package because it is powerful, lightweight, and fully customizable. After that, we will add an emoji picker on our homepage using the installed package.

Steps to Create React Application:

Step 1: Create a new ReactJs project using the below command:

npx create-react-app gfg

Step 2: Move to the project directory.

cd gfg

Step 3: Install the emoji-picker-react package using the below command:

npm i emoji-picker-react

Project Structure:

The updated dependencies in package.json file will look like.

"dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "emoji-picker-react": "^4.5.15",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4
}

Example: This example uses Picker component from emoji-picker-react module to implement the emojipicker and display emoji on the page.

JavaScript

// Filename - App.js  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);         console.log(emojiObject.target);     };      return (         <div>             <h3>GeeksforGeeks Emoji Picker</h3>             {chosenEmoji ? (                 <span>                     Your Emoji:                     <img                         style={{ width: "15px" }}                         src={chosenEmoji.target.src}                     />                 </span>             ) : (                 <span>No Emoji</span>             )}             <Picker onEmojiClick={onEmojiClick} />         </div>     ); }

Steps to run the application: Run the below command in the terminal to run the app.

npm start

Output: This output will be visible on the http://localhost:3000/ on the browser window.

How to create Color Picker in ReactJS ?

I

imranalam21510

Improve

Article Tags :

JavaScript
Web Technologies
ReactJS
React-Questions

Similar Reads

How to create Date Picker in ReactJS?

Date pickers provide a simple way to select a single value from a pre-determined set. Material UI for React has this component available for us and it is very easy to integrate. We can create a Date Picker in ReactJS using the following approach: Creating React Application And Installing Module: Ste

How to Create Emoji Picker in React Native ?

React Native is a popular cross-platform framework for mobile app development. Emojis have become common in modern applications, providing personalization and enhancing user engagement. In this article, we'll see how we can add an emoji picker to a React Native application. React Native doesn't have

How to create Time Picker in ReactJS ?

Time pickers provide a simple way to select a single value from a pre-determined set. Material UI for React has this component available for us and it is very easy to integrate. We can create a Time Picker in ReactJS using the following approach: Creating React Application And Installing Module: Ste

How to create Color Picker in ReactJS ?

In this article, we are going to learn how we can create a Color Picker in ReactJs. A color picker is a graphical user interface widget, usually found within graphics software or online, used to select colors and sometimes to create color schemes. Prerequisites:NodeJS or NPMReact JSApproach:To creat

How to create Emoji Picker in NextJS ?

Adding an emoji picker to your Next.js app makes it easy for users to express themselves with emojis. By integrating a simple and intuitive emoji picker, you can enhance user interactions and make your app more engaging and fun. In this article, we are going to learn how we can add Emoji Picker in N

How to Create More Options in ReactJS ?

More Options in React JS is a common feature that every application has to show the user some extra functionality on clicking on that button. Material UI for React has this component available for us and it is very easy to integrate. Prerequisites:NPM & Node.jsReact JSReact Material UIApproach:T

How to Create List Styling in ReactJS ?

React, a declarative, efficient, and flexible JavaScript library for building user interfaces, plays a crucial role as the 'V' in MVC. Specifically, ReactJS, an open-source, component-based front-end library maintained by Facebook, focuses on the view layer of applications. In this article, we will

How to create Avatar in react-native ?

React-native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render m

How to create Image Slider in ReactJS ?

Image Slider is a dynamic web element that displays a collection of images and has a slider to switch between the Images. It is the most common feature to show image collection in web applications or mobile apps. Websites like Amazon.com, Flipkart.com, and many e-commerce sites use image sliders to

How to add Color Picker in React Native ?

React Native is a popular cross-platform framework for mobile app development using JavaScript. It enables code reuse for iOS and Android platforms and frequently involves incorporating a color picker component. In this article, we'll see how to add a color picker in React native application by usin

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences