Noticeably Playful Monkeys

    react-native-complete-mentions

    1.0.9 • Public • Published

    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 --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>

    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)

    Install

    npm i react-native-complete-mentions

    DownloadsWeekly Downloads

    94

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    31.3 kB

    Total Files

    20

    Last publish

    Collaborators

    • preko96