Hello everyone! Today I have come up with a new topic after a long time. I hope you will enjoy today's blog.

So today's topic is how to implement emojis in ReactJS. 



There are many NPM (Node Package Manager) available for emojis. But one of my favourite NPM for 

emoji picker is npm i emoji-picker-react


Index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
reportWebVitals();



EmojiPickers.js
import React, { useState } from "react";
import Picker from "emoji-picker-react";
import "./App.css";

function EmojiPickers() {
  const [inputStr, setInputStr] = useState("");
  const [showPicker, setShowPicker] = useState(false);

  return (
    <div className="main-container">
      <input
        className="input"
        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)}
 alt="emoji"
      />
      {showPicker && (
        <Picker
          onEmojiClick={(emojiObject) =>
            setInputStr((prevInput) => prevInput + emojiObject.emoji)
          }
        />
      )}
    </div>
  );
}
export default EmojiPickers;


App.js
import React from "react";
import "./App.css";
import EmojiPickers from "./EmojiPickers";

function App() {
  return (
    <div className="app">
      <EmojiPickers />
    </div>
  );
}
export default App;

Output:


I hope this post will help you. Thank you, my friends!