React.js Textarea Emoji Autocomplete Using react-textarea-autocomplete Library in Javascript Full Project For Beginners



Welcome folks today in this blog post we will be building a react.js textarea autocomplete component which will used to write emoji using react-textarea-autocomplete library. All the full source code of the application is shown below.




Get Started




In order to get started you need to install the library using the below npm command



npm i react-textarea-autocomplete



After installing this library make an index.html file and copy paste the following code






<link rel="stylesheet" href=""/>

<div class="instruction"><span>This is example of </span><a href="" target="_blank">React Textarea Autocomplete</a></a>
    <p>Try to type something starting with <strong>:</strong></p>
    <p>Go-on! Try it! <strong>:smile:</strong></p>
<div id="root"></div>

<script src=""></script>

<script src=""></script>

<script src=""></script>

<script src=""></script>



Now make a style.css file and copy paste the following code






html {
     height: 100%;
 body {
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
 .instruction, .container {
     margin: 20px;
     width: 400px;
     height: 70px;
 .my-textarea {
     font-size: 20px;
     padding: 5px;
     border: 2px solid black;



And now make a script.js file and copy paste the following code






"use strict";

const Item = ({
  entity: {
}) => /*#__PURE__*/React.createElement("div", null, `${name}: ${char}`);

const rta = /*#__PURE__*/React.createElement("div", {
  className: "container"
}, /*#__PURE__*/React.createElement(ReactTextareaAutocomplete, {
  className: "my-textarea",
  onChange: e => console.log(,
  loadingComponent: () => /*#__PURE__*/React.createElement("span", null, "Loading"),
  trigger: {
    ":": {
      dataProvider: token => {
        return [{
          name: "smile",
          char: "🙂"
        }, {
          name: "heart",
          char: "❤️"
      component: Item,
      output: (item, trigger) => item.char
ReactDOM.render(rta, document.getElementById("root"));

Leave a Reply