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 search conditions
Use queryBy
option to change search conditions
import React from 'react';
import { MDBMention } from 'mdb-react-mention';
export default function App() {
return (
<>
<MDBMention
wrapperClass='me-2'
label='Search by username'
queryBy='username'
items={[
{ name: 'James', username: 'james123', image: '' },
{ name: 'John', username: 'john322', image: '' },
{ name: 'Mary', username: 'maryx', image: '' }
]}
/>
<MDBMention
label='Search by name'
queryBy='name'
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 |