Skip to content

jondeandres/react-mentions

 
 

Repository files navigation

#React Mentions

Build Status Dependency Status npm version Bower version

A React component that let's you mention people in a textarea like you are used to on Facebook or Twitter.

Getting started

  1. Install the react-mentions package via NPM:
npm install react-mentions
  1. Require the react-mentions package, which exports the two relevant React components for rendering the mentions textarea:
var mentions = require("react-mentions");

var MentionsInput = ReactMentions.MentionsInput;
var Mention = ReactMentions.Mention;

MentionsInput is the main component rendering the textarea control. It takes one or multiple Mention components as its children. Each Mention component is a data source for a specific class of mentionable objects, such as users, template variables, issues, etc.

Configuration

The MentionsInput supports the following props for configuring the widget:

Prop name Type Default value Description
markup string '@[__display__](__id__)' A template string for the markup to use for mentions when saving to the backend
singleLine boolean false Renders a single line text input instead of a textarea, if set to true
displayTransform function null Accepts a function for customizing the string that is displayed for a mention (optional)

Each data source is configured using a Mention component, which has the following props:

Prop name Type Default value Description
trigger regexp or string '@' Defines the char sequence upon which to trigger querying the data source
type string null Identifier for the data source, when using multiple data sources (optional)
data array null An array of the mentionable data entries
renderSuggestion function null Allows customizing how mention suggestions are rendered (optional)

Packages

No packages published

Languages

  • JavaScript 95.9%
  • CSS 3.1%
  • Other 1.0%