A React Native component that let's you mention people in a TextInput like you are used to on Facebook or Twitter.
Install the react-native-complete-mentions package via npm:
npm install react-native-complete-mentions --save
Or yarn:
yarn add react-native-complete-mentions
The 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>Expo Snack: https://snack.expo.io/@pr3k0/react-native-complete-mentions-examples
Please find the examples under the /examples folder
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) |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent