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
getSelectedItem (e: any) => void Returns a mentioned item <MDBMention items={someData} getSelectedValue={(e: any) => console.log(e)} />
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' }]} />
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 />
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' />
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' />
queryBy string 'name' Changes the key by which list will be rendered and filtered <MDBMention items={someData} queryBy='username' />
showImages boolean false Displays user image on the list <MDBMention items={someData} showImages />
showListOnTrigger boolean true Specifies whether whole list has to be opened before search input <MDBMention items={someData} showListOnTrigger={false} />
textarea boolean false Set true to enable textarea input format <MDBMention items={someData} textarea />
trigger string '@' Changes trigger sign that allows to search for items <MDBMention items={someData} trigger='#' />
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 />

Events

MDBMention

Name Type Description
getSelectedItem (e: any) => void Returns a mentioned item