Gathering detailed insights and metrics for react-native-headless-mention
Gathering detailed insights and metrics for react-native-headless-mention
npm install react-native-headless-mention
Typescript
Module System
TypeScript (97.48%)
JavaScript (2.52%)
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Total Downloads
5,970
Last Day
2
Last Week
40
Last Month
69
Last Year
3,782
MIT License
2 Stars
159 Commits
1 Forks
2 Watchers
2 Branches
1 Contributors
Updated on Mar 09, 2025
Minified
Minified + Gzipped
Latest Version
1.2.4
Package Id
react-native-headless-mention@1.2.4
Unpacked Size
92.96 kB
Size
21.01 kB
File Count
10
Published on
Dec 13, 2024
Cumulative downloads
Total Downloads
1
2
A headless mention component for React Native. It's a headless component, so you'll need to provide your styles and suggestions renderer.
You can use the following command to install this package, or replace npm install with your package manager of choice.
1npm i react-native-headless-mention
1import { useState, useRef, useEffect } from 'react'; 2import { Pressable, Text, View } from 'react-native'; 3import { Input, type MentionSuggestionsProps } from 'react-native-headless-mention'; 4 5const suggestions = [ 6 { id: '1', name: 'Parbez' }, 7 { id: '2', name: 'Voxelli' }, 8 { id: '3', name: 'Sho' }, 9 { id: '4', name: 'Hound' }, 10 { id: '5', name: 'Sarcaster' }, 11]; 12 13const renderSuggestions = ({ keyword, onSuggestionPress }: MentionSuggestionsProps) => { 14 if (keyword === undefined) return null; 15 16 return ( 17 <View> 18 {suggestions 19 .filter((one) => one.name.toLocaleLowerCase().includes(keyword.toLocaleLowerCase())) 20 .map((one) => ( 21 <Pressable key={one.id} onPress={() => onSuggestionPress(one)} style={{ padding: 12 }}> 22 <Text>{one.name}</Text> 23 </Pressable> 24 ))} 25 </View> 26 ); 27}; 28 29export default function Campaigns() { 30 const [value, setValue] = useState(''); 31 32 return ( 33 <Input 34 onChange={setValue} 35 partTypes={[ 36 { 37 trigger: '@', 38 renderSuggestions, 39 textStyle: { fontWeight: 'bold', color: 'blue' }, 40 getLabel(mention) { 41 const user = suggestions.find((one) => one.id === mention.id); 42 return user ? `@${user.name}` : `<@${mention.id}>`; 43 }, 44 pattern: /<(?<trigger>@)(?<id>\d+)>/g, 45 }, 46 ]} 47 value={value} 48 /> 49 ); 50} 51
[!Important] The pattern must be a global regex. If it's a mention regex then don't forget to add the group name
trigger
andid
in the regex.
[!Note] 2nd param of
onChange
provides all the parts of the value. You can use it to get the mentions present in the value.
1import { parseValue, type MentionPartType } from 'react-native-headless-mention'; 2 3 4const partTypes: MentionPartType[] = [ 5 { 6 trigger: '@', 7 renderSuggestions, 8 textStyle: { fontWeight: '500' }, 9 getLabel(mention) { 10 const user = suggestions.find((one) => one.id === mention.id); 11 return user ? `@${user.name}` : `<@${mention.id}>`; 12 }, 13 pattern: /<(?<trigger>@)(?<id>\d+)>/g, 14 renderPosition: 'bottom', 15 }, 16]; 17 18const values = parseValue(value, partTypes); 19 20console.log(values.parts.filter((part) => part.data?.trigger === '@').map((part) => part.data?.id));
This lib can also be used for formatting. It doesn't provide any pre-defined formatting but you can do it with regex. Here's a simple demo to achive simple markdown support
1import { useState, useRef, useEffect } from 'react'; 2import { Pressable, Text, View } from 'react-native'; 3import { Input } from 'react-native-headless-mention'; 4 5 6export default function Campaigns() { 7 const [value, setValue] = useState(''); 8 9 return ( 10 <Input 11 onChange={setValue} 12 partTypes={[ 13 { 14 textStyle: { fontWeight: '700' }, 15 pattern: /\*\*(?<text>\S(?:.*?\S)?)\*\*/g, 16 }, 17 { 18 textStyle: { textDecorationLine: 'underline' }, 19 pattern: /__(?<text>\S(?:.*?\S)?)__/g, 20 }, 21 { 22 textStyle: { fontStyle: 'italic' }, 23 pattern: /\*(?<text>\S(?:.*?\S)?)\*/g, 24 }, 25 { 26 textStyle: { fontStyle: 'italic' }, 27 pattern: /_(?<text>\S(?:.*?\S)?)_/g, 28 }, 29 { 30 textStyle: { textDecorationLine: 'line-through' }, 31 pattern: /~(?<text>\S(?:.*?\S)?)~/g, 32 }, 33 ]} 34 value={value} 35 /> 36 ); 37} 38
If you want to support me by donating, you can do so by using any of the following methods. Thank you very much in advance!
Thanks goes to these wonderful people:
No vulnerabilities found.
No security vulnerabilities found.
Last Day
100%
2
Compared to previous day
Last Week
1,900%
40
Compared to previous week
Last Month
-77.6%
69
Compared to previous month
Last Year
72.9%
3,782
Compared to previous year