if you are working with a chatbot application this is how to add a Emoji using Emoji Picker
Install Emoji Picker
npm i emoji-picker-react
C:\reactdev\myreactdev>npm i emoji-picker-react
https://www.npmjs.com/package/emoji-picker-react
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
)
public/index.html
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ReactJS </title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/App.js
//src/App.js
import React, { useState } from 'react';
import Picker from 'emoji-picker-react';
import './App.css';
function App() {
const [inputStr, setInputStr] = useState('');
const [showPicker, setShowPicker] = useState(false);
const onEmojiClick = (event, emojiObject) => {
setInputStr(prevInput => prevInput + emojiObject.emoji);
setShowPicker(false);
};
return (
<div className="app">
<h3>Add Emoji Picker</h3>
<div className="picker-container">
<input
className="input-style"
value={inputStr}
onChange={e => setInputStr(e.target.value)} />
<img
className="emoji-icon"
src="https://icons.getbootstrap.com/assets/icons/emoji-smile.svg"
onClick={() => setShowPicker(val => !val)} />
{showPicker && <Picker
pickerStyle={{ width: '100%' }}
onEmojiClick={onEmojiClick} />}
</div>
</div>
);
}
export default App;
src/App.css
//src/App.css
.picker-container {
position: relative;
width: 300px;
}
.emoji-icon {
cursor: pointer;
position: absolute;
top: 8px;
right: 5px;
}
.input-style {
padding: 7px 30px 7px 10px;
width: calc(100% - 40px);
border-radius: 3px;
border: 1px solid #999;
margin-bottom: 10px;
}
