Getting Started

10 Jan 202424 minutes to read

This section explains how to create a simple Mention component and configure its available functionalities in React.

To get start quickly with React Mention, you can check on this video:

Dependencies

The following list of dependencies are required to use the Mention component in your application.

|-- @syncfusion/ej2-react-dropdowns
|-- @syncfusion/ej2-dropdowns
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-lists
    |-- @syncfusion/ej2-popups
        |-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-react-base

Setup your development environment

You can use Create-react-app to setup the applications.

To install create-react-app run the following command.

    npm install -g create-react-app

Start a new project using create-react-app command as follows

``` create-react-app quickstart --scripts-version=react-scripts-ts cd quickstart ```

``` create-react-app quickstart cd quickstart ```

‘react-scripts-ts’ is used for creating React app with typescript.

Adding syncfusion packages

All the available Essential JS 2 packages are published in npmjs.com public registry. You can choose the component that you want to install.

To install Mention component, use the following command

    npm install @syncfusion/ej2-react-dropdowns --save

The above command installs Mention dependencies which are required to render the component in the React environment.

Adding Style sheet to the Application

To render Mention component, need to import dropdowns and its dependent components styles as given below in src/App.css.

/* import the Mention dependency styles */

@import "../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-react-buttons/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-react-popups/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-react-list/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-react-dropdowns/styles/bootstrap5.css";

Adding Mention component

Now, you can add the Mention component in the application. To use the Mention component properly, the target property should be configured so that it renders the Mention component in the configured element. Add Mention component in src/App.tsx file using the following code snippet.

[Class-component]

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
  // Defines the target in which the Mention component is rendered.
  private mentionTarget: string = '#mentionElement';
  public render() {
    return (
      <div id='mention_default'>
        <table>
            <tr>
                <td>
                    <label style="font-size: 15px; font-weight: 600;">Comments</label>
                    <div id="mentionElement" style="min-height: 100px; border: 1px solid #D7D7D7; border-radius: 4px; padding: 8px; font-size: 14px; width: 600px;"></div>
                </td>
            </tr>
        </table>

        <MentionComponent target={this.mentionTarget} ></MentionComponent>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('sample'));

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    // Defines the target in which the Mention component is rendered.
    mentionTarget = '#mentionElement';
    render() {
        return (<div id='mention_default'>
        <table>
            <tr>
                <td>
                    <label style="font-size: 15px; font-weight: 600;">Comments</label>
                    <div id="mentionElement" style="min-height: 100px; border: 1px solid #D7D7D7; border-radius: 4px; padding: 8px; font-size: 14px; width: 600px;"></div>
                </td>
            </tr>
        </table>

        <MentionComponent target={this.mentionTarget}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App (){
  // Defines the target in which the Mention component is rendered.
  let mentionTarget: string = '#mentionElement';
    return (
      <div id='mention_default'>
        <table>
            <tr>
                <td>
                    <label style="font-size: 15px; font-weight: 600;">Comments</label>
                    <div id="mentionElement" style="min-height: 100px; border: 1px solid #D7D7D7; border-radius: 4px; padding: 8px; font-size: 14px; width: 600px;"></div>
                </td>
            </tr>
        </table>

        <MentionComponent target={mentionTarget} ></MentionComponent>
      </div>
    );

}

ReactDOM.render(<App />, document.getElementById('sample'));

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    // Defines the target in which the Mention component is rendered.
    let mentionTarget = '#mentionElement';
    return (<div id='mention_default'>
        <table>
            <tr>
                <td>
                    <label style="font-size: 15px; font-weight: 600;">Comments</label>
                    <div id="mentionElement" style="min-height: 100px; border: 1px solid #D7D7D7; border-radius: 4px; padding: 8px; font-size: 14px; width: 600px;"></div>
                </td>
            </tr>
        </table>

        <MentionComponent target={mentionTarget}></MentionComponent>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));

Binding data source

After initialization, populate the data using the dataSource property. Here, an array of string values is passed to the Mention component.

[Class-component]

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
  // Defines the target in which the Mention component is rendered.
  private mentionTarget: string = '#mentionElement';

  // Defines the array of data.
  private userData: string[] = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];

  public render() {
    return (
      <div id='mention_default'>
        <table>
            <tr>
                <td>
                    <label style="font-size: 15px; font-weight: 600;">Comments</label>
                    <div id="mentionElement" style="min-height: 100px; border: 1px solid #D7D7D7; border-radius: 4px; padding: 8px; font-size: 14px; width: 600px;"></div>
                </td>
            </tr>
        </table>

        <MentionComponent target={this.mentionTarget} dataSource={this.userData}></MentionComponent>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('sample'));

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    // Defines the target in which the Mention component is rendered.
    mentionTarget = '#mentionElement';
    // Defines the array of data.
    userData = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];
    render() {
        return (<div id='mention_default'>
        <table>
            <tr>
                <td>
                    <label style="font-size: 15px; font-weight: 600;">Comments</label>
                    <div id="mentionElement" style="min-height: 100px; border: 1px solid #D7D7D7; border-radius: 4px; padding: 8px; font-size: 14px; width: 600px;"></div>
                </td>
            </tr>
        </table>

        <MentionComponent target={this.mentionTarget} dataSource={this.userData}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App () {
  // Defines the target in which the Mention component is rendered.
  let mentionTarget: string = '#mentionElement';

  // Defines the array of data.
  let userData: string[] = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];
  return (
      <div id='mention_default'>
        <table>
            <tr>
                <td>
                    <label style="font-size: 15px; font-weight: 600;">Comments</label>
                    <div id="mentionElement" style="min-height: 100px; border: 1px solid #D7D7D7; border-radius: 4px; padding: 8px; font-size: 14px; width: 600px;"></div>
                </td>
            </tr>
        </table>

        <MentionComponent target={mentionTarget} dataSource={userData}></MentionComponent>
      </div>
  );
}

ReactDOM.render(<App />, document.getElementById('sample'));

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    // Defines the target in which the Mention component is rendered.
    let mentionTarget = '#mentionElement';
    // Defines the array of data.
    let userData = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];
    return (<div id='mention_default'>
        <table>
            <tr>
                <td>
                    <label style="font-size: 15px; font-weight: 600;">Comments</label>
                    <div id="mentionElement" style="min-height: 100px; border: 1px solid #D7D7D7; border-radius: 4px; padding: 8px; font-size: 14px; width: 600px;"></div>
                </td>
            </tr>
        </table>

        <MentionComponent target={mentionTarget} dataSource={userData}></MentionComponent>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));

Run the application

Run the application in the browser using the following command:

npm start

The following example shows a basic Mention component.

[Class-component]

index.jsx

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    // Defines the target in which the Mention component is rendered.
    mentionTarget = '#mentionElement';
    // Defines the array of data.
    userData = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];
    render() {
        return (<div id='mention_default'>
        <table>
            <tr>
                <td>
                  <label id="comment">Comments</label>
                  <div id="mentionElement" placeholder='Type @ and tag user'></div>
                </td>
            </tr>
        </table>

        <MentionComponent target={this.mentionTarget} dataSource={this.userData}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
  // Defines the target in which the Mention component is rendered.
  private mentionTarget: string = '#mentionElement';

  // Defines the array of data.
  private userData: string[] = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];

  public render() {
    return (
      <div id='mention_default'>
        <table>
            <tr>
                <td>
                  <label id="comment">Comments</label>
                  <div id="mentionElement" placeholder='Type @ and tag user' ></div>
                </td>
            </tr>
        </table>

        <MentionComponent target={this.mentionTarget} dataSource={this.userData}></MentionComponent>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

index.jsx

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    // Defines the target in which the Mention component is rendered.
    let mentionTarget = '#mentionElement';
    // Defines the array of data.
    let userData = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];
    return (<div id='mention_default'>
        <table>
            <tr>
                <td>
                  <label id="comment">Comments</label>
                  <div id="mentionElement" placeholder='Type @ and tag user'></div>
                </td>
            </tr>
        </table>

        <MentionComponent target={mentionTarget} dataSource={userData}></MentionComponent>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App(){
  // Defines the target in which the Mention component is rendered.
  let mentionTarget: string = '#mentionElement';

  // Defines the array of data.
  let userData: string[] = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];

  return (
      <div id='mention_default'>
        <table>
            <tr>
                <td>
                  <label id="comment">Comments</label>
                  <div id="mentionElement" placeholder='Type @ and tag user' ></div>
                </td>
            </tr>
        </table>

        <MentionComponent target={mentionTarget} dataSource={userData}></MentionComponent>
      </div>
  );
}

ReactDOM.render(<App />, document.getElementById('sample'));

Display Mention character

By using the showMentionChar property, the text content can be displayed along with the mention character. You can customize the mention character by using the mentionChar property in the Mention component.

By default, the mentionChar is @ and the showMentionChar property is disabled.

The following example displays the text content along with the mention character configured as #.

[Class-component]

index.jsx

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    // Defines the target in which the Mention component is rendered.
    mentionTarget = '#mentionElement';
    // Defines the array of data.
    userData = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];
    // Defines the character in which the mention component is initialized when pressing.
    mentionCharacter = "#";
    render() {
        return (<div id='mention_default'>
        <table>
            <tr>
                <td>
                  <label id="comment">Comments</label>
                  <div id="mentionElement" placeholder='Type # and tag user'></div>
                </td>
            </tr>
        </table>
        <MentionComponent target={this.mentionTarget} dataSource={this.userData} showMentionChar={true} mentionChar={this.mentionCharacter}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
  // Defines the target in which the Mention component is rendered.
  private mentionTarget: string = '#mentionElement';

  // Defines the array of data.
  private userData: string[] = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];
  
  // Defines the character in which the mention component is initialized when pressing.
  private mentionCharacter: string = "#";

  public render() {
    return (
      <div id='mention_default'>
        <table>
            <tr>
                <td>
                  <label id="comment">Comments</label>
                  <div id="mentionElement" placeholder='Type # and tag user' ></div>
                </td>
            </tr>
        </table>
        <MentionComponent target={this.mentionTarget} dataSource={this.userData} showMentionChar={true} mentionChar={this.mentionCharacter}></MentionComponent>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

index.jsx

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    // Defines the target in which the Mention component is rendered.
    let mentionTarget = '#mentionElement';
    // Defines the array of data.
    let userData = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];
    // Defines the character in which the mention component is initialized when pressing.
    let mentionCharacter = "#";
    return (<div id='mention_default'>
        <table>
            <tr>
                <td>
                  <label id="comment">Comments</label>
                  <div id="mentionElement" placeholder='Type # and tag user'></div>
                </td>
            </tr>
        </table>
        <MentionComponent target={mentionTarget} dataSource={userData} showMentionChar={true} mentionChar={mentionCharacter}></MentionComponent>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App (){
  // Defines the target in which the Mention component is rendered.
  let mentionTarget: string = '#mentionElement';

  // Defines the array of data.
  let userData: string[] = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];
  
  // Defines the character in which the mention component is initialized when pressing.
  let mentionCharacter: string = "#";

    return (
      <div id='mention_default'>
        <table>
            <tr>
                <td>
                  <label id="comment">Comments</label>
                  <div id="mentionElement" placeholder='Type # and tag user' ></div>
                </td>
            </tr>
        </table>
        <MentionComponent target={mentionTarget} dataSource={userData} showMentionChar={true} mentionChar={mentionCharacter}></MentionComponent>
      </div>
    );

}

ReactDOM.render(<App />, document.getElementById('sample'));