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

 

 

index.html

 

 

<link rel="stylesheet" href="https://unpkg.com/@webscopeio/react-textarea-autocomplete@latest/style.css"/>

<div class="instruction"><span>This is example of </span><a href="https://github.com/webscopeio/react-textarea-autocomplete/" 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>
<div id="root"></div>

<script src="https://unpkg.com/react@latest/umd/react.development.js"></script>

<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>

<script src="https://unpkg.com/prop-types@latest/prop-types.js"></script>

<script src="https://unpkg.com/@webscopeio/react-textarea-autocomplete@latest/dist/react-textarea-autocomplete.umd.min.js"></script>

 

 

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

 

 

style.css

 

 

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

 

 

script.js

 

 

"use strict";

const Item = ({
  entity: {
    name,
    char
  }
}) => /*#__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(e.target.value),
  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