We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
The React Mention is an autocomplete-like component to tag or select a user/group from the suggestion list. The component opens the suggestion list when a user starts typing with the character ‘@’ in popular social media sites such as Facebook, Twitter, and more. It supports several out-of-the-box features: Data binding, grouping, UI customization, accessibility, and more.
The React Mention component seamlessly works with local and remote data sources such as an array of primitive data, datasets of complex items, JSON data collections, and remote data sources.
Tag or select a user/group from the suggestion list when composing the content in the Rich Text Editor.
Easy to integrate with editable components such as text area, text box, and div element with content-editable set to true.
Change the mentioned (trigger) character to # or other characters.
Allows multiple mention characters in a single editor such as @ for users’ selection list and # for topic selection list.
Change the visual appearance of the matched characters in the suggestion list.
Opens the suggestions when the character limit is reached.
Supports search options with space and displays the results in the suggestion list.
Users can add a suffix to the selected suggestion.
Display suggestions with categories and groups in the React Mention component.
Display the sorted suggestions in ascending or descending order.
Limit the number of items to be displayed in the suggestion list.
The appearance (style) of each item displayed in the suggestion list and selected value can be customized.
Include icons in the suggestion list items to improve visual representation.
Customize each suggestion list item by using item templates.
Customize the selected items displayed in the React Mention component.
Customize the empty result text in the suggestion popup.
Custmize the suggestion popup until data loading is completed.
Developers can control the appearance and behaviors of the Mention component using a rich set of APIs.
The React Mention component supports several built-in themes such as Fluent, Bootstrap 5, Tailwind CSS, Material, high contrast, and more. Users can customize one of these built-in themes or create new themes to achieve their own desired look and feel either by simply overriding SASS variables or using our Theme Studio application.
Documentation
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
