Mention

React 5 Mention plugin

Responsive Mention plugin built with the latest Bootstrap 5. Mention is an autocomplete dropdown menu for your search inputs. It is useful for tagging users or topics.

Note: Read the API tab to find all available options and advanced customization

Basic example

Type @ and use up/down arrows, home/end keys to navigate. Click enter or use mouse click to choose item 

        
            
            import React from 'react';
            import { MDBMention } from 'mdb-react-mention';

            export default function App() {
              return (
                <MDBMention
                  queryBy='username'
                  label='Type @ to open mentions list'
                  items={[
                    { name: 'James', username: 'james123', image: '' },
                    { name: 'John', username: 'john322', image: '' },
                    { name: 'Mary', username: 'maryx', image: '' }
                  ]}
                />
              );
            }

Toggle show list on trigger

Showing all items on trigger key is turned on by default. Set showListOnTrigger option to false to turn it off and show items only after user search input 

        
            
            import React from 'react';
            import { MDBMention } from 'mdb-react-mention';

            export default function App() {
              return (
                <MDBMention
                  showListOnTrigger={false}
                  queryBy='username'
                  label='Type @ and start searching items'
                  items={[
                    { name: 'James', username: 'james123', image: '' },
                    { name: 'John', username: 'john322', image: '' },
                    { name: 'Mary', username: 'maryx', image: '' }
                  ]}
                />
              );
            }

Placement example

Use placement options to change placement of the component

        
            
            import React from 'react';
            import { MDBMention } from 'mdb-react-mention';

            export default function App() {
              return (
                <>
                  <MDBMention
                    label='Top placement example'
                    queryBy='username'
                    wrapperClass='me-2'
                    placement='top'
                    items={[
                      { name: 'James', username: 'james123', image: '' },
                      { name: 'John', username: 'john322', image: '' },
                      { name: 'Mary', username: 'maryx', image: '' }
                    ]}
                  />
                  <MDBMention
                    queryBy='username'
                    label='Right placement example'
                    placement='right'
                    items={[
                      { name: 'James', username: 'james123', image: '' },
                      { name: 'John', username: 'john322', image: '' },
                      { name: 'Mary', username: 'maryx', image: '' }
                    ]}
                  />
                </>
              );
            }

Textarea example

Mention works also with textarea

        
            
            import React from 'react';
            import { MDBMention } from 'mdb-react-mention';

            export default function App() {
              return (
                <MDBMention
                  label='Textarea example'
                  textarea
                  queryBy='username'
                  items={[
                    { name: 'James', username: 'james123', image: '' },
                    { name: 'John', username: 'john322', image: '' },
                    { name: 'Mary', username: 'maryx', image: '' }
                  ]}
                />
              );
            }

Customize no results text

Set noResultsText to a text of your choice to change the message for no results found 

        
            
            import React from 'react';
            import { MDBMention } from 'mdb-react-mention';

            export default function App() {
              return (
                <MDBMention label='No results text' noResultsLabel='No matches found' items={[]} />
              );
            }

Trigger sign

Use trigger option to change search triggering sign

        
            
            import React from 'react';
            import { MDBMention } from 'mdb-react-mention';

            export default function App() {
              return (
                <MDBMention
                  label='Trigger sign'
                  queryBy='username'
                  trigger='#'
                  items={[
                    { name: 'James', username: 'james123', image: '' },
                    { name: 'John', username: 'john322', image: '' },
                    { name: 'Mary', username: 'maryx', image: '' }
                  ]}
                />
              );
            }

Show image

Use showImg option to show images in the mentions list

        
            
            import React from 'react';
            import { MDBMention } from 'mdb-react-mention';

            export default function App() {
              return (
                <MDBMention
                  label='Show image'
                  queryBy='username'
                  showImages
                  items={[
                    { name: 'James', username: 'james123', image: 'https://mdbootstrap.com/img/Photos/Others/images/43.webp' },
                    { name: 'John', username: 'john322', image: 'https://mdbootstrap.com/img/Photos/Others/images/43.webp' },
                    { name: 'Mary', username: 'maryx', image: 'https://mdbootstrap.com/img/Photos/Others/images/43.webp' },
                  ]}
                />
              );
            }

Visible items

Use visibleItems option to change the number of options that will be displayed in the select dropdown without scrolling. 

        
            
            import React from 'react';
            import { MDBMention } from 'mdb-react-mention';

            export default function App() {
              return (
                <MDBMention
                  label='Visible items'
                  queryBy='username'
                  visibleItems={3}
                  items={[
                    { name: 'James', username: 'james123', image: '' },
                    { name: 'John', username: 'john322', image: '' },
                    { name: 'Mary', username: 'maryx', image: '' },
                    { name: 'Diane', username: 'didiane92', image: '' },
                    { name: 'Max', username: 'maximus', image: '' },
                    { name: 'Andrew', username: 'andrew00', image: '' },
                    { name: 'Rebecca', username: 'becky', image: '' },
                    { name: 'Thomas', username: 'tommy16', image: '' },
                    { name: 'Alexander', username: 'xander', image: '' },
                    { name: 'Jessica', username: 'jessyJ12', image: '' },
                  ]}
                />
              );
            }

Multiple lists

Assign multiple mentions to the element by giving each mention different trigger key

        
            
            import React from 'react';
            import { MDBMention } from 'mdb-react-mention';

            export default function App() {
              return (
                <MDBMention
                  label='Triggers: @, #, $, %'
                  multiple
                  items={[
                    {
                      queryBy: 'username',
                      trigger: '@',
                      items: [
                        { name: 'James', username: 'james123', image: '' },
                        { name: 'John', username: 'john322', image: '' },
                        { name: 'Mary', username: 'maryx', image: '' },
                        { name: 'Diane', username: 'didiane92', image: '' },
                        { name: 'Max', username: 'maximus', image: '' },
                        { name: 'Andrew', username: 'andrew00', image: '' },
                        { name: 'Rebecca', username: 'becky', image: '' },
                        { name: 'Thomas', username: 'tommy16', image: '' },
                        { name: 'Alexander', username: 'xander', image: '' },
                        { name: 'Jessica', username: 'jessyJ12', image: '' },
                      ],
                    },
                    {
                      trigger: '#',
                      queryBy: 'productName',
                      items: [{ productName: 'fish' }, { productName: 'meat' }, { productName: 'vegetables' }],
                    },
                    {
                      trigger: '$',
                      queryBy: 'id',
                      items: [{ id: '1234' }, { id: '4955' }, { id: '3455' }],
                    },
                    {
                      trigger: '%',
                      queryBy: 'city',
                      items: [{ city: 'Warsaw' }, { city: 'Berlin' }, { city: 'Amsterdam' }],
                    },
                  ]}
                />
              );
            }

Asynchronous data

        
            
            import React, { useState, useEffect } from 'react';
            import { MDBMention } from 'mdb-react-mention';

            export default function App() {
              const [asyncData, setAsyncData] = useState([]);

              useEffect(() => {
                fetch('https://jsonplaceholder.typicode.com/users')
                  .then((data) => data.json())
                  .then((data) => setAsyncData(data));
              }, []);

              return (
                <MDBMention wrapperClass='me-2' label='Async data success' items={asyncData} />
              );
            }

Mention - API

Import

        
            
            import { MDBMention } from 'mdb-react-mention';

Properties

MDBMention

Name Type Default Description Example
placement Placement (check this type in the official popper.js documentation) 'bottom' Changes placement of the component relative to the reference element <MDBMention items={someData} placement='top' />
items Record<string, any> [] An array of items to display on the list. If there's more than one trigger - each object should contain the required queryBy, trigger and items values. <MDBMention items={[{ username: 'john123', name: 'John' }]} />
trigger string '@' Changes trigger sign that allows to search for items <MDBMention items={someData} trigger='#' />
queryBy string 'name' Changes the key by which list will be rendered and filtered <MDBMention items={someData} queryBy='username' />
showListOnTrigger boolean true Specifies whether whole list has to be opened before search input <MDBMention items={someData} showListOnTrigger={false} />
showImages boolean false Displays user image on the list <MDBMention items={someData} showImages />
noResultsLabel string 'No results' The text that will be displayed when no item is found after using mention filter. <MDBMention items={someData} noResultsLabel='No users matching the query' />
visibleItems number 5 The maximum number of items which are visible in the mention dropdown without scrolling. <MDBMention items={someData} visibleItems={3} />
multiple boolean false Enables using more datasets and triggers with a specific structure described above. <MDBMention items={[{ queryBy: 'username', trigger: '@', items: { username: 'john123' } }, { queryBy: 'name', trigger: '#', items: { name: 'John' } }]} multiple />
getSelectedItem (e: any) => void Returns a mentioned item <MDBMention items={someData} getSelectedValue={(e: any) => console.log(e)} />