lara-light-indigo

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;

NameTypeDefaultDescription
idstringnullUnique identifier of the element.
inputIdstringnullIdentifier of the input element.
styleobjectnullInline style of the component.
classNamestringnullStyle class of the component.
triggerstring|array@Set trigger keyword.
suggestionsarraynullAn array of suggestions to display.
fieldstring|arraynullField of a suggested object to resolve and display.
inputStyleobjectnullInline style of the input field.
inputClassNamestringnullStyle class of the input field.
panelClassNamestringnullStyle class of the overlay panel element.
panelStyleobjectnullInline style of the overlay panel element.
scrollHeightstring200pxMaximum height of the suggestions panel.
autoHighlightbooleantrueWhen enabled, highlights the first item in the list by default.
placeholderbooleantruePlaceholder text for the input.
delaynumber0Delay between keystrokes to wait before sending a query.
headerTemplateanynullThe template of header.
footerTemplateanynullThe template of footer.
itemTemplateanynullCustom template for the items.
transitionOptionsobjectnullThe properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
Events
NameParametersDescription
onChangeevent: Browser eventCallback to invoke when value changes.
onFocusevent: Browser event.Callback to invoke when the element receives focus.
onBlurevent: 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.
onSearchevent.originalEvent: Browser event
event.trigger: Current trigger keyword.
Callback to invoke when search.
onSelectevent.originalEvent: Browser event
event.suggestion: Selected item
Callback to invoke when selection changes.
onInputevent: Browser eventCallback to invoke on input event of input field.
Styling

Following is the list of structural style classes

NameElement
p-mentionContainer element
p-mention-panelOverlay panel of suggestions.
p-mention-itemsList container of suggestions.
p-mention-itemList item of a suggestion.
Dependencies

None.

Component Scale

Input Style

Ripple Effect

Free Themes

Built-in component themes created by the PrimeReact Theme Designer.

Bootstrap
Blue
Purple
Blue
Purple
Material Design
Indigo
Deep Purple
Indigo
Deep Purple
Material Design Compact
Indigo
Deep Purple
Indigo
Deep Purple
Tailwind
Tailwind Light
Fluent UI
Blue
PrimeOne Design - 2022 NEW
Lara Indigo
Lara Blue
Lara Purple
Lara Teal
Lara Indigo
Lara Blue
Lara Purple
Lara Teal
PrimeOne Design - 2021
Saga Blue
Saga Green
Saga Orange
Saga Purple
Vela Blue
Vela Green
Vela Orange
Vela Purple
Arya Blue
Arya Green
Arya Orange
Arya Purple
Premium Themes

Premium themes are only available exclusively for PrimeReact Theme Designer subscribers and therefore not included in PrimeReact core.

Soho Light
Soho Dark
Viva Light
Viva Dark
Mira
Nano

Legacy Free Themes

Nova
Nova Alt
Nova Accent
Luna Blue
Luna Green
Luna Amber
Luna Pink
Rhea

Premium Create-React-App Templates

Beautifully crafted premium create-react-app application templates by the PrimeTek design team.

Sakai
Atlantis
Freya
Ultima
Diamond
Sapphire
Serenity
Babylon
Avalon
Apollo
Roma