Installations
npm install react-native-headless-mention
Developer Guide
Typescript
Yes
Module System
CommonJS, ESM
Releases
Unable to fetch releases
Contributors
Languages
TypeScript (97.48%)
JavaScript (2.52%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
imranbarbhuiya
Download Statistics
Total Downloads
5,970
Last Day
2
Last Week
40
Last Month
69
Last Year
3,782
GitHub Statistics
MIT License
2 Stars
159 Commits
1 Forks
2 Watchers
2 Branches
1 Contributors
Updated on Mar 09, 2025
Bundle Size
28.13 kB
Minified
9.79 kB
Minified + Gzipped
Package Meta Information
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
Total Downloads
Cumulative downloads
Total Downloads
5,970
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
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
2
Description
A headless mention component for React Native. It's a headless component, so you'll need to provide your styles and suggestions renderer.
Features
- Written In Typescript
- Offers CJS, and ESM builds
- Full TypeScript & JavaScript support
Install
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
Usage
For mention with autocomplete
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.
Get mentions from 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));
For formatting
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
Buy me some doughnuts
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!
Contributors ✨
Thanks goes to these wonderful people:

No vulnerabilities found.

No security vulnerabilities found.