Example of Multiple List in React Mention Component


This sample demonstrates the different mentioned characters that are used to render the suggestion list. Type the @ or # or $ or % characters to select or tag the name from respective suggestion lists.

More Details...


In the above sample, the following are configured for the contenteditable div element with @mention integrated.

  • @ - Typing @ lists out the suggestions of the employee names.
  • # - Typing # lists the project names.
  • $ - Typing $ lists out the cost of the project.
  • % - Typing % lists the status of the project.