How to Create Textarea @mention People In React 18

Last Updated on March 4, 2024 by Digamber in React JS

If you are seeking how to build an autocomplete-like component in a Textarea graphical element for selecting or tagging a user or group from a suggested options list, you’re in luck.

In this tutorial, we will teach you how to create a @mention component in combination with a rich text area in React using react-mentions and functional component, also how to add custom styling in @metnion Textarea text control, aiming to add dynamic functionalities in React web projects.

React-mentions is a developer-friendly library that enables users to create a mention or tagging system within their React applications. This library simplifies the process of implementing user mentions (such as @mentions) or tagging functionality (like #hashtags) in input fields or in the React Text Editor.

Our React Mention Component example demonstrates the simple usage of React Mentions. We’ll build simple functionality that enables developers to display pre-defined user or data record lists by just typing @ in the text area.

It offers front-end developers a dynamic way to interact with other users by tagging or mentioning their names in comments, posts, or messages, anyone can integrate the @mention feature in text areas, text boxes, or other editable components.

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 UserForm.js file.

import React from 'react'

function UserForm() {
  return (
    <div></div>
  )
}

export default UserForm

Implement @Mention Tagging in Textarea Component

To integrate react-mention within our React application, 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/UserForm.js file.

import React from "react";
import { MentionsInput, Mention } from "react-mentions";
import MentionStyle from "./MentionStyle";

function UserForm() {
  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={MentionStyle}
        value={textAreaVal}
        onChange={(e) => setTextAreaVal(e.target.value)}
      >
        <Mention
          style={{
            backgroundColor: "#ccc",
          }}
          data={users}
        />
      </MentionsInput>
    </div>
  );
}

export default UserForm;

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 MentionStyle.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",
      },
    },
  },
};

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 "./App.css";

import "bootstrap/dist/css/bootstrap.min.css";
import UserForm from "./components/UserForm";

function App() {
  return (
    <div className="container mt-3">
      <h2 className="mb-3">React Textarea @Mentions Name Component Example</h2>
      <UserForm />
    </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 is common feature, used by people to mention specific user or group of people in their post or content, notifying someone about the published content. This feature is mainly seen in social media sites where mentioning someone’s name is a common habit.

In this quick tutorial, we learned how to easily add @mention in Textarea box in React application.

Refer to the library’s documentation for more advanced usage such as available props, and customization options.