{"repo":"dabakovich/react-native-controlled-mentions","free":true,"listed":false,"github":"https://github.com/dabakovich/react-native-controlled-mentions","clone":"git clone https://github.com/dabakovich/react-native-controlled-mentions.git","description":"Fully controlled React Native mentions component","language":"TypeScript","stars":293,"topics":["react-native-mentions","mentions","textinput","react-native"],"license":"MIT","category":"mobile-apps","readme_excerpt":"react-native-controlled-mentions [![npm version][npm-image]][npm-url] Add to your TextInput ability to highlight mentions, hashtags or other custom patterns. It can: - Gracefully render formatted text directly in React Native TextInput component - Support for different mention types ( @user mentions , #hashtags , etc) - Completely typed (written on TypeScript) - No need for native libraries In addition, you can add custom styling for a regex pattern (like URLs). Contents - Demo - Installation - Getting Started - API - Migration Guide - Parsing Mention's Value - Rendering Mention's Value - To Do - Known Issues - Support Me Demo Try it on Expo Snack: https://snack.expo.dev/@dabakovich/mentionsappv3?platform=ios Installation Getting Started For instance, you have next controlled TextInput : Now you need few simple steps: - Add hook useMentions from the react-native-controlled-mentions - Move textValue and setTextValue from TextInput to the just added hook as you see below - Use returned textInputProps as new props for the TextInput component now See code Add the triggersConfig property where you can define what trigger types you want to support. Important. Create the constant once out of functional component body, or memoize it using useMemo to avoid unnecessary re-renders. See code Define your Suggestions functional component that receives SuggestionsProvidedProps: See code useMentions hook returns also triggers value that you can use as provided props for rendering suggestions","default_branch":null,"files":null,"tree":[],"storefront":"/r/dabakovich","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/dabakovich/react-native-controlled-mentions/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}