Here is the improved article with proper HTML formatting, code snippets, and other requested changes:

Building a Comment Form with @Mention Functionality in React

Prior to @Mention Functionalities

Prior to the introduction of @mention functionalities, commenting on threads and messages was often messy and disorganized. It was difficult to know who a message was intended for, and there was no way to engage users who weren’t already part of the conversation. With the introduction of @mention, you can now mention friends or colleagues and invite them to join the discussion.

Getting Started

First, create a new React app using your preferred method. Then, install the react-mentions package using npm or yarn:

npm install react-mentions

Using the MentionsInput and Mention Components

The react-mentions package exports two main components: MentionsInput and Mention. The MentionsInput component is the main text area control, while the Mention component represents a data source for mentionable objects, such as users or issues.

Here’s an example of how to use these components:

import React, { useState } from 'react';
import { MentionsInput, Mention } from 'react-mentions';

const users = [
  { id: 1, display: 'John Doe' },
  { id: 2, display: 'Jane Doe' },
];

const App = () => {
  const [value, setValue] = useState('');

  return (
    <MentionsInput
      value={value}
      onChange={(e) => setValue(e.target.value)}
    >
      <Mention
        trigger="@"
        data={users}
        renderSuggestion={(suggestion) => (<div>{suggestion.display}</div>)}
      />
    </MentionsInput>
  );
};

Styling the Components

You can customize the appearance of the MentionsInput and Mention components by passing in custom styles or classes.

For example, you can create a custom CSS file and import it into your component:

.mentions-input {
  padding: 10px;
  border: 1px solid #ccc;
}

.mention-suggestion {
  background-color: #f0f0f0;
  padding: 5px;
}

Then, pass the custom classes to the components:

<MentionsInput
  value={value}
  onChange={(e) => setValue(e.target.value)}
  className="mentions-input"
>
  <Mention
    trigger="@"
    data={users}
    renderSuggestion={(suggestion) => (<div>{suggestion.display}</div>)}
  />
</MentionsInput>

Exploring Other Functionalities

The react-mentions package offers several other features, including:

• Single-line input
• Multiple trigger patterns
• Modifying the displaying ID
• Scrollable text area
• Fetching responses from external sources
• Fetching emojis

You can explore these features by checking out the official documentation or experimenting with the code.

Creating a Custom Form with @Mention Functionality

Now that we’ve covered the basics of the react-mentions package, let’s build a custom comment form with @mention functionality.

Create a new file called CustomForm.jsx and add the following code:

import React, { useState } from 'react';
import { MentionsInput, Mention } from 'react-mentions';

const users = [
  { id: 1, display: 'John Doe' },
  { id: 2, display: 'Jane Doe' },
];

const CustomForm = () => {
  const [value, setValue] = useState('');
  const [comments, setComments] = useState([]);

  const handleSubmit = (e) => {
    e.preventDefault();
    setComments((prevComments) => [...prevComments, value]);
    setValue('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <MentionsInput
        value={value}
        onChange={(e) => setValue(e.target.value)}
      >
        <Mention
          trigger="@"
          data={users}
          renderSuggestion={(suggestion) => (<div>{suggestion.display}</div>)}
        />
      </MentionsInput>
      <button type="submit">Submit</button>
      <ul>
        {comments.map((comment, index) => (<li key={index}>{comment}</li>))}
      </ul>
    </form>
  );
};

export default CustomForm;

This code creates a simple comment form with @mention functionality. When the user submits the form, the comment is added to the list of comments below.