react-native-headless-mention

A headless mention component for React Native.

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.

npm i react-native-headless-mention

Usage

import { useState, useRef, useEffect } from 'react';
import { Pressable, Text, View } from 'react-native';
import { Input, type MentionSuggestionsProps } from 'react-native-headless-mention';

const suggestions = [
	{ id: '1', name: 'Parbez' },
	{ id: '2', name: 'Voxelli' },
	{ id: '3', name: 'Sho' },
	{ id: '4', name: 'Hound' },
	{ id: '5', name: 'Sarcaster' },
];

const renderSuggestions = ({ keyword, onSuggestionPress }: MentionSuggestionsProps) => {
	if (keyword === undefined) return null;

	return (
		<View>
			{suggestions
				.filter((one) => one.name.toLocaleLowerCase().includes(keyword.toLocaleLowerCase()))
				.map((one) => (
					<Pressable key={one.id} onPress={() => onSuggestionPress(one)} style={{ padding: 12 }}>
						<Text>{one.name}</Text>
					</Pressable>
				))}
		</View>
	);
};

export default function Campaigns() {
	const [value, setValue] = useState('');

	return (
		<Input
			onChange={setValue}
			partTypes={[
				{
					trigger: '@',
					renderSuggestions,
					textStyle: { fontWeight: 'bold', color: 'blue' },
					getLabel(mention) {
						const user = suggestions.find((one) => one.id === mention.id);
						return user ? `@${user.name}` : `<@${mention.id}>`;
					},
					pattern: /<(?<trigger>@)(?<id>\d+)>/g,
				},
			]}
			value={value}
		/>
	);
}

[!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

import { parseValue, type MentionPartType } from 'react-native-headless-mention';


const partTypes: MentionPartType[] = [
	{
		trigger: '@',
		renderSuggestions,
		textStyle: { fontWeight: '500' },
		getLabel(mention) {
			const user = suggestions.find((one) => one.id === mention.id);
			return user ? `@${user.name}` : `<@${mention.id}>`;
		},
		pattern: /<(?<trigger>@)(?<id>\d+)>/g,
		renderPosition: 'bottom',
	},
];

const values = parseValue(value, partTypes);

console.log(values.parts.filter((part) => part.data?.trigger === '@').map((part) => part.data?.id));

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: