React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Customization in React Mention component

02 Feb 2023 / 6 minutes to read

Show or hide mention character

By default, the showMentionChar which does not display the text content with the mentioned character is disabled. If the property showMentionChar is enabled, it allows the respective mentionChar configured along with the text content opted from the suggested list to display.

[Class-component]

Source
Preview
index.jsx
index.html
styles.css
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        // Defines the target in which the Mention component is rendered.
        this.mentionTarget = '#mentionElement';
        // Defines the array of data.
        this.userData = [
            { Name: "Selma Rose", EmailId: "selma@gmail.com" },
            { Name: "Maria", EmailId: "maria@gmail.com" },
            { Name: "Russo kay", EmailId: "russo@gmail.com" },
            { Name: "Robert", EmailId: "robert@gmail.com" },
            { Name: "Garth", EmailId: "garth@gmail.com" }
        ];
        this.fields = { text: 'Name' };
    }
    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} fields={this.fields} showMentionChar={true}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React AutoComplete</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="./styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #sample {
            position: absolute;
            top: 15%;
            left: 10%;
        }
    </style>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#mentionElement{
  min-height: 100px;
  border: 1px solid #D7D7D7; 
  border-radius: 4px; 
  padding: 8px; 
  font-size: 14px; 
  width: 600px;

}
#comment{
  font-size: 15px; 
  font-weight: 600;
}
div#mentionElement[placeholder]:empty:before {
  content: attr(placeholder);
}
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';

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:{ [key: string]: Object }[] = [
    { Name : "Selma Rose", EmailId : "selma@gmail.com"},
    { Name : "Maria", EmailId : "maria@gmail.com" },
    { Name : "Russo kay", EmailId : "russo@gmail.com" },
    { Name : "Robert", EmailId : "robert@gmail.com" },
    { Name : "Garth", EmailId : "garth@gmail.com" }
  ];
  private fields: Object = {text:'Name'};
  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} fields={this.fields}showMentionChar= {true}></MentionComponent>
      </div>
    );
  }
}

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

[Functional-component]

Source
Preview
index.jsx
index.html
styles.css
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
function App() {
    // Defines the target in which the Mention component is rendered.
    let mentionTarget = '#mentionElement';
    // Defines the array of data.
    let userData = [
        { Name: "Selma Rose", EmailId: "selma@gmail.com" },
        { Name: "Maria", EmailId: "maria@gmail.com" },
        { Name: "Russo kay", EmailId: "russo@gmail.com" },
        { Name: "Robert", EmailId: "robert@gmail.com" },
        { Name: "Garth", EmailId: "garth@gmail.com" }
    ];
    let fields = { text: 'Name' };
    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} fields={fields} showMentionChar={true}></MentionComponent>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React AutoComplete</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="./styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #sample {
            position: absolute;
            top: 15%;
            left: 10%;
        }
    </style>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#mentionElement{
  min-height: 100px;
  border: 1px solid #D7D7D7; 
  border-radius: 4px; 
  padding: 8px; 
  font-size: 14px; 
  width: 600px;

}
#comment{
  font-size: 15px; 
  font-weight: 600;
}
div#mentionElement[placeholder]:empty:before {
  content: attr(placeholder);
}
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';

function App (){
  // Defines the target in which the Mention component is rendered.
  let mentionTarget: string = '#mentionElement';
  // Defines the array of data.
  let userData:{ [key: string]: Object }[] = [
    { Name : "Selma Rose", EmailId : "selma@gmail.com"},
    { Name : "Maria", EmailId : "maria@gmail.com" },
    { Name : "Russo kay", EmailId : "russo@gmail.com" },
    { Name : "Robert", EmailId : "robert@gmail.com" },
    { Name : "Garth", EmailId : "garth@gmail.com" }
  ];
  let fields: Object = {text:'Name'};
  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} fields={fields}showMentionChar= {true}></MentionComponent>
      </div>
  );

}

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

Adding the suffix character after selection

The Mention has provided support to specify the custom suffix to append alongside the mentioned selected item while inserting. You can append space or new line character as suffixText.

[Class-component]

Source
Preview
index.jsx
index.html
styles.css
index.tsx
Copied to clipboard
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 {
    constructor() {
        super(...arguments);
        this.mentionTarget = '#mentionElement';
        this.userData = [
            { Country: "Australia", Code: "AU" },
            { Country: "Bermuda", Code: "BM" },
            { Country: "Canada", Code: "CA" },
            { Country: "Cameroon", Code: "CM" },
            { Country: "Denmark", Code: "DK" }
        ];
        this.fields = { text: 'Country' };
    }
    render() {
        return (<div id='mention_default'>
        <table>
            <tr>
              <td>
                <label id="comment">Comments</label>
                <div id="mentionElement" placeholder='Type @ and tag country'></div>
              </td>
            </tr>
        </table>
        <MentionComponent target={this.mentionTarget} dataSource={this.userData} fields={this.fields} showMentionChar={true} suffixText={'&nbsp;'}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React AutoComplete</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="./styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #sample {
            position: absolute;
            top: 15%;
            left: 10%;
        }
    </style>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#mentionElement{
  min-height: 100px;
  border: 1px solid #D7D7D7; 
  border-radius: 4px; 
  padding: 8px; 
  font-size: 14px; 
  width: 600px;

}
#comment{
  font-size: 15px; 
  font-weight: 600;
}
div#mentionElement[placeholder]:empty:before {
  content: attr(placeholder);
}
Copied to clipboard
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<{}, {}> {
  private mentionTarget: string = '#mentionElement';
  private userData:{ [key: string]: Object }[] = [
    { Country : "Australia", Code : "AU" },
    { Country : "Bermuda" , Code : "BM" },
    { Country : "Canada" , Code :  "CA" },
    { Country : "Cameroon" , Code : "CM" },
    { Country : "Denmark" , Code : "DK" }
  ];
  private fields: Object = {text:'Country'};
  public render() {
    return (
      <div id='mention_default'>
        <table>
            <tr>
              <td>
                <label id="comment">Comments</label>
                <div id="mentionElement" placeholder='Type @ and tag country' ></div>
              </td>
            </tr>
        </table>
        <MentionComponent target={this.mentionTarget} dataSource={this.userData} fields={this.fields} showMentionChar= {true} suffixText={'&nbsp;'}></MentionComponent>
      </div>
    );
  }
}

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

[Functional-component]

Source
Preview
index.jsx
index.html
styles.css
index.tsx
Copied to clipboard
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    let mentionTarget = '#mentionElement';
    let userData = [
        { Country: "Australia", Code: "AU" },
        { Country: "Bermuda", Code: "BM" },
        { Country: "Canada", Code: "CA" },
        { Country: "Cameroon", Code: "CM" },
        { Country: "Denmark", Code: "DK" }
    ];
    let fields = { text: 'Country' };
    return (<div id='mention_default'>
        <table>
            <tr>
              <td>
                <label id="comment">Comments</label>
                <div id="mentionElement" placeholder='Type @ and tag country'></div>
              </td>
            </tr>
        </table>
        <MentionComponent target={mentionTarget} dataSource={userData} fields={fields} showMentionChar={true} suffixText={'&nbsp;'}></MentionComponent>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React AutoComplete</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="./styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #sample {
            position: absolute;
            top: 15%;
            left: 10%;
        }
    </style>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#mentionElement{
  min-height: 100px;
  border: 1px solid #D7D7D7; 
  border-radius: 4px; 
  padding: 8px; 
  font-size: 14px; 
  width: 600px;

}
#comment{
  font-size: 15px; 
  font-weight: 600;
}
div#mentionElement[placeholder]:empty:before {
  content: attr(placeholder);
}
Copied to clipboard
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App (){
  let mentionTarget: string = '#mentionElement';
  let userData:{ [key: string]: Object }[] = [
    { Country : "Australia", Code : "AU" },
    { Country : "Bermuda" , Code : "BM" },
    { Country : "Canada" , Code :  "CA" },
    { Country : "Cameroon" , Code : "CM" },
    { Country : "Denmark" , Code : "DK" }
  ];
  let fields: Object = {text:'Country'};

  return (
      <div id='mention_default'>
        <table>
            <tr>
              <td>
                <label id="comment">Comments</label>
                <div id="mentionElement" placeholder='Type @ and tag country' ></div>
              </td>
            </tr>
        </table>
        <MentionComponent target={mentionTarget} dataSource={userData} fields={fields} showMentionChar= {true} suffixText={'&nbsp;'}></MentionComponent>
      </div>
  );

}

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

Configure the popup list

You can customize the suggestion list width and height using the popupHeight and popupWidth properties.

By default, the popup list width value is set as auto. Depending on the mentioned suggestion data list, the width value is automatically adjusted. The popup list height value is set as 300px.

[Class-component]

Source
Preview
index.jsx
index.html
styles.css
index.tsx
Copied to clipboard
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 {
    constructor() {
        super(...arguments);
        this.mentionTarget = '#mentionElement';
        this.sportsData = [
            { ID: "game1", Game: "Badminton" },
            { ID: "game2", Game: "Football" },
            { ID: "game3", Game: "Tennis" },
            { ID: "game4", Game: "Hockey" },
            { ID: "game5", Game: "Basketball" },
            { ID: "game6", Game: "Cricket" }
        ];
        this.fields = { text: 'Game' };
    }
    render() {
        return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag sport'></div>
            </td>
          </tr>
        </table>
        <MentionComponent target={this.mentionTarget} dataSource={this.sportsData} fields={this.fields} popupHeight={'200px'} popupWidth={'250px'}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React AutoComplete</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="./styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #sample {
            position: absolute;
            top: 15%;
            left: 10%;
        }
    </style>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#mentionElement{
  min-height: 100px;
  border: 1px solid #D7D7D7; 
  border-radius: 4px; 
  padding: 8px; 
  font-size: 14px; 
  width: 600px;

}
#comment{
  font-size: 15px; 
  font-weight: 600;
}
div#mentionElement[placeholder]:empty:before {
  content: attr(placeholder);
}
Copied to clipboard
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<{}, {}> {
  private mentionTarget: string = '#mentionElement';

  private sportsData: {[key: string]: Object}[] = [
    { ID : "game1" ,Game : "Badminton"},
    { ID : "game2" ,Game : "Football" },
    { ID : "game3" ,Game : "Tennis"},
    { ID : "game4" ,Game : "Hockey"},
    { ID : "game5" ,Game : "Basketball"},
    { ID : "game6" ,Game : "Cricket"}
  ];
  private fields: Object = {text:'Game'};
  public render() {
    return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag sport' ></div>
            </td>
          </tr>
        </table>
        <MentionComponent target={this.mentionTarget} dataSource={this.sportsData} fields={this.fields} popupHeight={'200px'}  popupWidth={'250px'}></MentionComponent>
      </div>
    );
  }
}

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

[Functional-component]

Source
Preview
index.jsx
index.html
styles.css
index.tsx
Copied to clipboard
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    let mentionTarget = '#mentionElement';
    let sportsData = [
        { ID: "game1", Game: "Badminton" },
        { ID: "game2", Game: "Football" },
        { ID: "game3", Game: "Tennis" },
        { ID: "game4", Game: "Hockey" },
        { ID: "game5", Game: "Basketball" },
        { ID: "game6", Game: "Cricket" }
    ];
    let fields = { text: 'Game' };
    return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag sport'></div>
            </td>
          </tr>
        </table>
        <MentionComponent target={mentionTarget} dataSource={sportsData} fields={fields} popupHeight={'200px'} popupWidth={'250px'}></MentionComponent>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React AutoComplete</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="./styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #sample {
            position: absolute;
            top: 15%;
            left: 10%;
        }
    </style>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#mentionElement{
  min-height: 100px;
  border: 1px solid #D7D7D7; 
  border-radius: 4px; 
  padding: 8px; 
  font-size: 14px; 
  width: 600px;

}
#comment{
  font-size: 15px; 
  font-weight: 600;
}
div#mentionElement[placeholder]:empty:before {
  content: attr(placeholder);
}
Copied to clipboard
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
  let mentionTarget: string = '#mentionElement';

  let sportsData: {[key: string]: Object}[] = [
    { ID : "game1" ,Game : "Badminton"},
    { ID : "game2" ,Game : "Football" },
    { ID : "game3" ,Game : "Tennis"},
    { ID : "game4" ,Game : "Hockey"},
    { ID : "game5" ,Game : "Basketball"},
    { ID : "game6" ,Game : "Cricket"}
  ];
  let fields: Object = {text:'Game'};
  
  return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag sport' ></div>
            </td>
          </tr>
        </table>
        <MentionComponent target={mentionTarget} dataSource={sportsData} fields={fields} popupHeight={'200px'}  popupWidth={'250px'}></MentionComponent>
      </div>
  );

}

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

Trigger character

You can customize the trigger character by using the mentionChar property in the Mention component. The trigger character triggers the suggestion list to display in the target area.

By default, the mentionChar is @.

Previous
Next