1.0.9 • Published 4 years ago
react-native-complete-mentions v1.0.9
React Native Complete Mentions
A React Native component that let's you mention people in a TextInput like you are used to on Facebook or Twitter.
Getting started
Install the react-native-complete-mentions package via npm:
npm install react-native-complete-mentions --saveOr yarn:
yarn add react-native-complete-mentionsThe package exports 2 components
import { MentionInput, Tag } from 'react-native-complete-mentions'MentionInput is the main component rendering the textarea control. It takes one or multiple Mention components as its children. Each Tag component represents a data source for a specific class of mentionable objects, such as users, template variables, issues, etc.
<MentionInput value={this.state.value} onChangeText={this.handleChange}>
<Tag
trigger="@"
renderSuggestions={this.renderUserSuggestion}
/>
<Tag
tag="#"
renderSuggestions={this.renderTagSuggestion}
/>
</MentionInput>Configuration
The MentionInput supports the following props for configuring the widget:
| Prop name | Type | Default value | Description |
|---|---|---|---|
| value | string | '' | The value containing markup for mentions |
| onChangeText | function (string) | empty function | A callback that is invoked when the user changes the value in the mentions input |
| inputRef | React ref | undefined | Accepts a React ref to forward to the underlying input element (optional) |
| onExtractedStringChange | function (string) | undefined | Extract the formated text when the displayed input changes. (optional) |
Each data source is configured using a Tag component, which has the following props:
| Prop name | Type | Default value | Description |
|---|---|---|---|
| tag | string | '@' | Defines the char sequence upon which to trigger querying the data source |
| renderText | function(mention): ReactTextNode | null | Allows customizing how mentions are displayed. |
| renderSuggestions | function ({ tracking, keyword, commit }) | null | Allows customizing how mentions list are rendered (optional) |
| formatText | function(string): string | null | Allows customizing the mentioned text. (optional) |
| extractString | function(mention): string | null | Allows customizing the extracted string, for example extractString={mention => `@[${mention.name}](id:${mention.id})`} (optional) |
| extractCommit | function(commit) | null | Allows you to extract the commit (insert new mention) functionality. (optional) |