How to add an emoji picker to an input field in react app

Creating a new react app

npx create-react-app

Starting the app -

# npm
npm start
# yarn
yarn start

Installing the required dependencies -

# npm
npm install emoji-mart
# yarn
yarn add emoji-mart

Cleanup process

Delete everything inside the div in App.js and remove the import of logo.svg on top.
Delete logo.svg file.
Delete everything in App.css.
In index.css add this line of code -
```
* {
margin: 0;
}
```

Creating an input

import "./App.css";

function App() {
  return (
    <div className="app">
      <input type="text" placeholder="emoji picker demo" />
    </div>
  );
}

export default App;

Mapping to a state

import { useState } from "react";
import "./App.css";

function App() {
  const [input, setInput] = useState("");

  return (
    <div className="app">
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        type="text"
        placeholder="emoji picker demo"
      />
    </div>
  );
}

export default App;

Creating an svg button for emojis

     <button>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className="icon"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
      </button>

Adding some styles in App.css

.icon {
  height: 40px;
  width: 40px;
}

.button {
  background: transparent;
  outline: none;
  border: none;
}

Creating a state for showing picker

const [showEmojis, setShowEmojis] = useState(false);

Attaching it to the onClick of button

<button className="button" onClick={() => setShowEmojis(!showEmojis)}>

Rendering the emoji picker

 {showEmojis && (
        <div>
          <Picker />
        </div>
      )}

We will import Picker and the CSS like this

import { Picker } from "emoji-mart";
import "emoji-mart/css/emoji-mart.css";

Adding the emojis with the text in the input

Add an onSelect to the picker

<Picker onSelect={addEmoji} />

Create the addEmoji function

  const addEmoji = (e) => {
    let sym = e.unified.split("-");
    let codesArray = [];
    sym.forEach((el) => codesArray.push("0x" + el));
    let emoji = String.fromCodePoint(...codesArray);
    setInput(input + emoji);
  };