How to Create @mention People In React Textarea

In this tutorial, we will learn how to build @mention people or user names in the Textarea component in React js function component using the React mentions library.

React-mentions is a React library that offers a facile to add @mentions functionality to text inputs, permitting other users to tag other users or entities within the input field.

Generically used in web applications where users need to interact with other users by tagging or mentioning their names in comments, posts, or messages.

React-mentions is easy to use and flexible; it is very much customizable and offers a wide array of features such as suggestions, filtering, and highlighting.

It also supports various use cases, such as searching for users or entities from a database, providing a pre-defined list of suggestions, and allowing custom rendering of the suggestions list.

To use React-mentions, you need to import the Mention component and pass in an array of data containing the entities or users that can be mentioned.

You can then render the Mention component within a text input and provide options for displaying and handling the mentions.

Overall, React-mentions is a valuable library that provides a convenient way to add @mentions functionality to your React applications, making it easier for users to communicate and collaborate with each other.

How to Implement CandleStick Chart in React with React Apexcharts

• Step 1: Build React Project
• Step 2: Install Apexcharts Package
• Step 3: Create Function Component
• Step 4: Build CandleStick Chart Component
• Step 5: Style @mention Input
• Step 6: Update App Js Entry
• Step 7: Run App in Browser

Build React Project

Before we get started, we have to install a fresh new React framework.

You can skip this step, if your app is already setup.

npx create-react-app my-react-app

Now, you can get into the app folder.

cd my-react-app

Install React Mentions Module

Next, we will use command to install react-mentions and bootstrap libraries.

npm i react-mentions bootstrap --legacy-peer-deps

Create Function Component

Now, you have to create the components/ folder along with the TextMention.js file.

import React from 'react'
function TextMention() {
  return (
    <div></div>
  )
}
export default TextMention

Build CandleStick Chart Component

To integrate react-mention within our React application. Move over to the TextMention.js file that you previously created inside the components folder.

Create an array of users name; it will be manifested when the user types in @.

Make sure to create a state using the useState hook; this state will manage the @mention value.

Update given code in the components/TextMention.js file.

import React from "react";
import { MentionsInput, Mention } from "react-mentions";
import MentionWrapperStyle from "./MentionWrapperStyle";
import TextMentionStyle from "./TextMentionStyle";
function TextMention() {
  const [textAreaVal, setTextAreaVal] = React.useState("");
  const users = [
    {
      id: "walter",
      display: "Walter White",
    },
    {
      id: "pipilu",
      display: "皮皮鲁",
    },
    {
      id: "luxixi",
      display: "鲁西西",
    },
    {
      id: "nobi",
      display: "野比のび太",
    },
    {
      id: "sung",
      display: "성덕선",
    },
    {
      id: "jesse",
      display: "Jesse Pinkman",
    },
    {
      id: "gus",
      display: 'Gustavo "Gus" Fring',
    },
    {
      id: "saul",
      display: "Saul Goodman",
    },
    {
      id: "hank",
      display: "Hank Schrader",
    },
    {
      id: "skyler",
      display: "Skyler White",
    },
    {
      id: "mike",
      display: "Mike Ehrmantraut",
    },
    {
      id: "lydia",
      display: "Lydìã Rôdarté-Qüayle",
    },
  ];
  return (
    <div>
      <MentionsInput
        style={MentionWrapperStyle}
        value={textAreaVal}
        onChange={(e) => setTextAreaVal(e.target.value)}
      >
        <Mention style={TextMentionStyle} data={users} />
      </MentionsInput>
    </div>
  );
}
export default TextMention;

Style @mention Input

In this step, we will show you how to style the textarea and the @mentions user’s list, which will display after the user types in @ symbol.

Create a new file in components/ folder by the name of MentionWrapperStyle.js and add the below code in the file.

export default {
  control: {
    fontSize: 18,
  },
  "&multiLine": {
    control: {
      fontFamily: "monospace",
      minHeight: 63,
    },
    highlighter: {
      padding: 10,
      border: "2px solid transparent",
    },
    input: {
      padding: 10,
      border: "2px solid silver",
    },
  },
  "&singleLine": {
    display: "inline-block",
    width: 180,
    highlighter: {
      padding: 1,
      border: "2px inset transparent",
    },
    input: {
      padding: 1,
      border: "2px inset",
    },
  },
  suggestions: {
    list: {
      backgroundColor: "white",
      border: "1px solid #333",
      fontSize: 18,
    },
    item: {
      padding: "10px 20px",
      borderBottom: "1px solid #333",
      "&focused": {
        backgroundColor: "#F6A9C6",
      },
    },
  },
};

You also need to create components/TextMentionStyle.js file and copy the given code into the file.

export default {
  backgroundColor: "#ccc",
};

Update Main Entry

Head over to the src/ folder, you have to look for App.js file open this file and add the given code.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import TextMention from "./components/TextMention";
function App() {
  return (
    <div className="container mt-3">
      <h2 className="mb-3">React Textarea @Mentions Name Component Example</h2>
      <TextMention />
    </div>
  );
}
export default App;

Run App in Browser

Execute the suggested command to run the React’s development server.

npm start

http://localhost:3000

Wait for couple of seconds, It will open your app with the following url:

Conclusion

The @mention functionality is a common feature primarily used in social media sites where we mention someone’s name in the comment section.

Ideally, a comment section is a place where people post their opinions.

Seldom does the comment section gets crowded; in response to that @mention feature comes to light. When we mention someone in the comment section, it notifies the person we refer to.

This guide taught us how to easily add a @mention user name in the textarea or comment area in React js.

To implement the @mention in React, we have used an external library.