Feature, expose extra mention data to onChange/onSuggestionPress

README.md

@@ -101,7 +101,7 @@ API
 | **Property name**     | **Description**                                                	    | **Type**                                  | **Required** 	| **Default** 	|
 |-------------------	|--------------------------------------------------------------------   |----------------------------------------   |------------   |------------   |
 | `value`             	| The same as in `TextInput`                                            | string                 	                | true     	    |               |
-| `onChange`          	| The same as in `TextInput`                                            | (value: string) => void 	                | true     	    |               |
+| `onChange`          	| The same as in `TextInput`                                            | (value: string, mentionExtraData?: any) => void 	                | true     	    |               |
 | `partTypes`      	    | Declare what part types you want to support (mentions, hashtags, urls)| [PartType](#parttype-type)[]              | false    	    | []            |
 | `inputRef`          	| Reference to the `TextInput` component inside `MentionInput`	        | Ref\<TextInput>          	                | false    	    |               |
 | `containerStyle`    	| Style to the `MentionInput`'s root component                 	        | StyleProp\<TextStyle>                     | false    	    |               |
@@ -147,7 +147,7 @@ Examples where @name is just plain text yet, not mention and `|` is cursor posit
 'abc @|name dfg' - keyword is against ''
 'abc @name |dfg' - keyword is against undefined
 ```
-`onSuggestionPress: (suggestion: Suggestion) => void`
+`onSuggestionPress: (suggestion: Suggestion, mentionExtraData?: any) => void`
 
 You should call that callback when user selects any suggestion.
 
@@ -161,6 +161,11 @@ Unique id for each suggestion.
 
 Name that will be shown in `MentionInput` when user will select the suggestion.
 
+`mentionExtraData: any`
+
+Any type of structure you desire to expose to the **onChange** method to handle extra mention manipulations
+
+
 ### `MentionData` type props
 
 For example, we have that mention value `@[David Tabaka](123)`. Then after parsing that string by `mentionRegEx` we will get next properties:
@@ -277,6 +282,113 @@ const renderValue: FC = (
   return <Text>{parts.map(renderPart)}</Text>;
 };
 ```
+Using `mentionExtraData` example
+-
+If you want to make additional manipulations with mentions you can use the optional `mentionExtraData` param.
+
+Here is an example:
+
+
+```tsx
+import React from "react";
+import { Pressable, Text, View } from "react-native";
+import {
+  MentionInput,
+  MentionSuggestionsProps,
+} from "react-native-controlled-mentions";
+
+const randomSuggestions = [
+  {
+    url: "google.com",
+    id: "123",
+    name: "Google",
+    avatar: "GoogleAvatarUrl",
+  },
+  {
+    url: "bing.com",
+    id: "345",
+    name: "Bing",
+    avatar: "BingAvatarUrl",
+  },
+];
+
+const MentionList = (props: MentionSuggestionsProps) => {
+  const { keyword, onSuggestionPress } = props;
+
+  if (keyword == null) {
+    return null;
+  }
+
+  const onAddMention = (mention: any) => {
+    const { name, id, url, avatar } = mention;
+
+    // preview purpose, you can pass any data to mention
+    const extraMentionData = {
+      url,
+      avatar,
+      name,
+      id,
+    };
+    // passes to MentionInput onChange, it's optional
+    onSuggestionPress({ id, name }, extraMentionData);
+  };
+
+  return (
+    <View>
+      {randomSuggestions
+        .filter((one) =>
+          one.name.toLocaleLowerCase().includes(keyword.toLocaleLowerCase())
+        )
+        .map((suggestion) => (
+          <Pressable
+            key={suggestion.id}
+            onPress={() => onAddMention(suggestion)}
+            style={{ padding: 12 }}
+          >
+            <Text>{suggestion.name}</Text>
+            <Text>{suggestion.url}</Text>
+            <Text>{suggestion.avatar}</Text>
+            <Text>{suggestion.id}</Text>
+          </Pressable>
+        ))}
+    </View>
+  );
+};
+
+export const ExtraMentionDataSample = () => {
+  const [textValue, setTextValue] = React.useState("");
+  const [mentions, setMentions] = React.useState([]);
+
+  const onChangeText = (text: string, mentionData?: any) => {
+    const newMentions = mentionData ? [...mentions, mentionData] : mentions;
+    // save newly selected mention
+    setMentions(newMentions);
+    setTextValue(text);
+  };
+
+  return (
+    <MentionInput
+      value={textValue}
+      onChange={onChangeText}
+      partTypes={[
+        {
+          trigger: "@",
+          renderSuggestions: (localProps) => {
+            return (
+              <MentionList
+                onSuggestionPress={localProps.onSuggestionPress}
+                keyword={localProps.keyword}
+              />
+            );
+          },
+        },
+      ]}
+    />
+  );
+};
+```
+
+
 
 To Do
 -

src/components/mention-input.tsx

@@ -74,7 +74,7 @@ const MentionInput: FC<MentionInputProps> = (
    * - Get updated value
    * - Trigger onChange callback with new value
    */
-  const onSuggestionPress = (mentionType: MentionPartType) => (suggestion: Suggestion) => {
+  const onSuggestionPress = (mentionType: MentionPartType) => (suggestion: Suggestion, mentionExtraData?: any) => {
     const newValue = generateValueWithAddedSuggestion(
       parts,
       mentionType,
@@ -87,7 +87,7 @@ const MentionInput: FC<MentionInputProps> = (
       return;
     }
 
-    onChange(newValue);
+    onChange(newValue, mentionExtraData);
 
     /**
      * Move cursor to the end of just added mention starting from trigger string and including:

src/types/types.ts

@@ -7,6 +7,7 @@ type Suggestion = {
   name: string;
 };
 
+
 type MentionData = {
   original: string;
   trigger: string;
@@ -47,7 +48,7 @@ type Position = {
 
 type MentionSuggestionsProps = {
   keyword: string | undefined;
-  onSuggestionPress: (suggestion: Suggestion) => void;
+  onSuggestionPress: (suggestion: Suggestion, mentionExtraData?: any) => void;
 };
 
 type MentionPartType = {
@@ -93,7 +94,7 @@ type Part = {
 
 type MentionInputProps = Omit<TextInputProps, 'onChange'> & {
   value: string;
-  onChange: (value: string) => any;
+  onChange: (value: string, mentionExtraData?: any) => any;
 
   partTypes?: PartType[];
 
@@ -113,5 +114,5 @@ export type {
   MentionPartType,
   PatternPartType,
   PartType,
-  MentionInputProps,
-};
+  MentionInputProps
+};