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 and id 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: