Mention

Mention component is used to refer someone or something.

Basic

Auto Resize

Multiple Trigger

Import via Module


import { Mention } from 'primereact/mention';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/mention/mention.min.js"></script>

Getting Started

Mention is used as a controlled component with suggestions and onSearch properties.


<Mention suggestions={suggestions} onSearch={onSearch} field="nickname" placeholder="Please enter @ to mention people" />


const customers = // datasource

const onSearch = (event) => {
    //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
    setTimeout(() => {
        const query = event.query;
        let suggestions;

        if (!query.trim().length) {
            suggestions = [...customers];
        }
        else {
            suggestions = customers.filter((customer) => {
                return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
            });
        }

        setSuggestions(suggestions);
    }, 250);
}

Trigger

It is used to define the expected keyword/s in the input field to mention someone or something.


<Mention trigger="@" suggestions={suggestions} onSearch={onSearch} field="nickname" placeholder="Please enter @ to mention people" />

<Mention trigger={['@', '#']} suggestions={suggestions} onSearch={onSearch} field="nickname" placeholder="Please enter @ to mention people" />

Properties

InputTextarea passes any attribute to the underlying textarea element, additional attributes are as follows;

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
inputId	string	null	Identifier of the input element.
style	object	null	Inline style of the component.
className	string	null	Style class of the component.
trigger	string\|array	@	Set trigger keyword.
suggestions	array	null	An array of suggestions to display.
field	string\|array	null	Field of a suggested object to resolve and display.
inputStyle	object	null	Inline style of the input field.
inputClassName	string	null	Style class of the input field.
panelClassName	string	null	Style class of the overlay panel element.
panelStyle	object	null	Inline style of the overlay panel element.
scrollHeight	string	200px	Maximum height of the suggestions panel.
autoHighlight	boolean	true	When enabled, highlights the first item in the list by default.
placeholder	boolean	true	Placeholder text for the input.
delay	number	0	Delay between keystrokes to wait before sending a query.
headerTemplate	any	null	The template of header.
footerTemplate	any	null	The template of footer.
itemTemplate	any	null	Custom template for the items.
transitionOptions	object	null	The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

Events

Name	Parameters	Description
onChange	event: Browser event	Callback to invoke when value changes.
onFocus	event: Browser event.	Callback to invoke when the element receives focus.
onBlur	event: Browser event.	Callback to invoke when the element loses focus.
onShow	-	Callback to invoke when overlay panel becomes visible.
onHide	-	Callback to invoke when overlay panel becomes hidden.
onSearch	event.originalEvent: Browser event event.trigger: Current trigger keyword.	Callback to invoke when search.
onSelect	event.originalEvent: Browser event event.suggestion: Selected item	Callback to invoke when selection changes.
onInput	event: Browser event	Callback to invoke on input event of input field.

Styling

Following is the list of structural style classes

Name	Element
p-mention	Container element
p-mention-panel	Overlay panel of suggestions.
p-mention-items	List container of suggestions.
p-mention-item	List item of a suggestion.