Gathering detailed insights and metrics for react-native-headless-mention
Gathering detailed insights and metrics for react-native-headless-mention
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
40.5
Supply Chain
29.9
Quality
71
Maintenance
100
Vulnerability
94.8
License
TypeScript (97.48%)
JavaScript (2.52%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
2 Stars
188 Commits
1 Forks
2 Watchers
2 Branches
1 Contributors
Updated on Jun 30, 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
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year