{"id":25052515,"url":"https://github.com/devconn99/rn-controlled-mentions","last_synced_at":"2025-03-31T06:21:54.795Z","repository":{"id":115684329,"uuid":"568606495","full_name":"devconn99/rn-controlled-mentions","owner":"devconn99","description":"React Native App","archived":false,"fork":false,"pushed_at":"2022-11-21T02:28:22.000Z","size":805,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"1.x","last_synced_at":"2025-02-06T10:45:26.278Z","etag":null,"topics":["react-native","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devconn99.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-21T02:26:44.000Z","updated_at":"2022-11-21T02:31:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"17f85ce2-ad44-4b61-abff-1bca138497a4","html_url":"https://github.com/devconn99/rn-controlled-mentions","commit_stats":null,"previous_names":["devonconn99/rn-controlled-mentions","devconn99/rn-controlled-mentions"],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devconn99%2Frn-controlled-mentions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devconn99%2Frn-controlled-mentions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devconn99%2Frn-controlled-mentions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devconn99%2Frn-controlled-mentions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devconn99","download_url":"https://codeload.github.com/devconn99/rn-controlled-mentions/tar.gz/refs/heads/1.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246424194,"owners_count":20774918,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-native","typescript"],"created_at":"2025-02-06T10:30:41.582Z","updated_at":"2025-03-31T06:21:54.774Z","avatar_url":"https://github.com/devconn99.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"react-native-controlled-mentions [![npm version][npm-image]][npm-url]\n-\nPretty simple and fully controlled mention input. It can:\n\n* Gracefully render formatted mentions directly in RN `TextInput` component\n* Support for different mention types (**[@user mentions](#demo)**, **#hashtags**, etc)\n* Use `value`/`onChange` as in usual `TextInput` props\n* Completely typed (written on TypeScript)\n* No need for native libraries\n\nDemo\n-\nTry it on Expo Snack: https://snack.expo.io/@dabakovich/mentionsapp\n\n![](demo.gif)\n\nGetting started\n-\n\nInstall the library using either Yarn:\n\n``yarn add react-native-controlled-mentions``\n\nor npm:\n\n``npm install --save react-native-controlled-mentions``\n\nUsage\n-\n\nImport the [MentionInput](#mentioninput-component-props) component:\n\n```tsx\nimport { MentionInput } from 'react-native-controlled-mentions'\n```\n\nReplace your [TextInput](https://reactnative.dev/docs/textinput) by [MentionInput](#mentioninput-component-props) component and add the `mentionTypes` property where you can define what mention types you want to support. It takes an array of [MentionType](#mentiontype-type-props) objects.\n\n```tsx\n\u003cMentions\n  value={value}\n  onChange={setValue}\n\n  mentionTypes={[\n    {\n      trigger: '@', // Should be a single character like '@' or '#'\n      renderSuggestions,\n      textStyle: {fontWeight: 'bold', color: 'blue'}, // The mention style in the input\n    },\n  ]}\n/\u003e\n```\n\nDefine your `renderSuggestions` functional component that receive [MentionSuggestionsProps](#mentionsuggestionsprops-type-props):\n\n```tsx\nconst suggestions = [\n  {id: '1', name: 'David Tabaka'},\n  {id: '2', name: 'Mary'},\n  {id: '3', name: 'Tony'},\n  {id: '4', name: 'Mike'},\n  {id: '5', name: 'Grey'},\n];\n\nconst renderSuggestions: FC\u003cMentionSuggestionsProps\u003e = ({keyword, onSuggestionPress}) =\u003e {\n  if (keyword == null) {\n    return null;\n  }\n\n  return (\n    \u003cView\u003e\n      {suggestions\n        .filter(one =\u003e one.name.toLocaleLowerCase().includes(keyword.toLocaleLowerCase()))\n        .map(one =\u003e (\n          \u003cPressable\n            key={one.id}\n            onPress={() =\u003e onSuggestionPress(one)}\n\n            style={{padding: 12}}\n          \u003e\n            \u003cText\u003e{one.name}\u003c/Text\u003e\n          \u003c/Pressable\u003e\n        ))\n      }\n    \u003c/View\u003e\n  );\n};\n```\n\nYou're done!\n\nThe whole example is in the `/example` folder.\n\nAPI\n-\n\n### `MentionInput` component props\n\n| **Property name**     | **Description**                                                \t    | **Type**                                  | **Required** \t| **Default** \t|\n|-------------------\t|--------------------------------------------------------------------   |----------------------------------------   |------------   |------------   |\n| `value`             \t| The same as in `TextInput`                                            | string                 \t                | true     \t    |               |\n| `onChange`          \t| The same as in `TextInput`                                            | (value: string) =\u003e void \t                | true     \t    |               |\n| `mentionTypes`      \t| Declare what mention types you want to support (mentions, hashtags) \t| [MentionType](#mentiontype-type-props)[]  | false    \t    | []            |\n| `inputRef`          \t| Reference to the `TextInput` component inside `MentionInput`\t        | Ref\\\u003cTextInput\u003e          \t                | false    \t    |               |\n| `containerStyle`    \t| Style to the `MentionInput`'s root component                 \t        | StyleProp\\\u003cTextStyle\u003e                     | false    \t    |               |\n| ...textInputProps \t| Other text input props                                     \t        | TextInputProps         \t                | false    \t    |               |\n\n### `MentionType` type props\n\n| **Property name**             | **Description**                                                                       | **Type**                                                                              | **Required** \t| **Default** \t|\n|---------------------------\t|-----------------------------------------------------------------------------------\t|-----------------------------------------------------------------------------------\t|------------   |-----------    |\n| `trigger`                   \t| Character that will trigger current mention type                                     \t| string                                        \t                                    | true     \t    |               |\n| `renderSuggestions`         \t| Renderer for mention suggestions component                                           \t| (props: [MentionSuggestionsProps](#mentionsuggestionsprops-type-props)) =\u003e ReactNode \t| false    \t    |               |\n| `isInsertSpaceAfterMention` \t| Should we add a space after selected mentions if the mention is at the end of row \t| boolean                                       \t                                    | false    \t    | false         |\n| `textStyle`                 \t| Text style for mentions in `TextInput`                                                | StyleProp\\\u003cTextStyle\u003e                         \t                                    | false    \t    |               |\n| `getPlainString`            \t| Function for generating custom mention text in text input                         \t| (mention: [MentionData](#mentiondata-type-props)) =\u003e string              \t            | false    \t    |               |\n\n### `MentionSuggestionsProps` type props\n\n`keyword: string | undefined`\n\nKeyword that will provide string between trigger character (e.g. '@') and cursor.\n\nIf the cursor is not tracking any mention typing the `keyword` will be `undefined`.\n\nExamples where @name is just plain text yet, not mention and `|` is cursor position:\n\n```\n'|abc @name dfg' - keyword is undefined\n'abc @| dfg' - keyword is ''\n'abc @name| dfg' - keyword is 'name'\n'abc @na|me dfg' - keyword is 'na'\n'abc @|name dfg' - keyword is against ''\n'abc @name |dfg' - keyword is against undefined\n```\n`onSuggestionPress: (suggestion: Suggestion) =\u003e void`\n\nYou should call that callback when user selects any suggestion.\n\n### `Suggestion` type props\n\n`id: string`\n\nUnique id for each suggestion.\n\n`name: string`\n\nName that will be shown in `MentionInput` when user will select the suggestion.\n\n### `MentionData` type props\n\nFor example, we have that mention value `@[David Tabaka](123)`. Then after parsing that string by `mentionRegEx` we will get next properties:\n\n`original: string`\n\nThe whole mention value string - `@[David Tabaka](123)`\n\n`trigger: string`\n\nThe extracted trigger - `@`\n\n`name: string`\n\nThe extracted name - `David Tabaka`\n\n`id: string`\n\nThe extracted id - `123`\n\n### `mentionRegEx`\n\n```jsregexp\n/(?\u003coriginal\u003e(?\u003ctrigger\u003e.)\\[(?\u003cname\u003e([^[]*))]\\((?\u003cid\u003e([\\d\\w-]*))\\))/gi;\n```\n\n\nParsing `Mention`'s value\n-\n\nYou can import RegEx that is using in the component and then extract all your mentions\nfrom `Mention`'s value using your own logic.\n\n```ts\nimport { mentionRegEx } from 'react-native-controlled-mentions';\n```\n\nOr you can use `replaceMentionValues` helper to replace all mentions from `MentionInput`'s input using\nyour replacer function that receives [MentionData](#mentiondata-type-props) type and returns string.\n\n```ts\nimport { replaceMentionValues } from 'react-native-controlled-mentions';\n\nconst value = 'Hello @[David Tabaka](5)! How are you?';\n\nconsole.log(replaceMentionValues(value, ({id}) =\u003e `@${id}`)); // Hello @5! How are you?\nconsole.log(replaceMentionValues(value, ({name}) =\u003e `@${name}`)); // Hello @David Tabaka! How are you?\n```\n\nTo Do\n-\n\n* Add support for different text formatting (e.g. URLs)\n* ~~Add more customizations~~ DONE\n* ~~Add ability to handle few mention types (\"#\", \"@\" etc)~~ DONE\n\nKnown issues\n-\n\n* Mention name regex accepts white spaces (e.g. `{name: ' ', value: 1}`)\n* ~~Keyboard auto-correction not working if suggested word has the same length~~ FIXED\n* ~~Text becomes transparent when setting custom font size in TextInput~~ FIXED\n\n[npm-image]: https://img.shields.io/npm/v/react-native-controlled-mentions\n[npm-url]: https://npmjs.org/package/react-native-controlled-mentions\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevconn99%2Frn-controlled-mentions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevconn99%2Frn-controlled-mentions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevconn99%2Frn-controlled-mentions/lists"}