Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/imranbarbhuiya/react-native-headless-mention
https://github.com/imranbarbhuiya/react-native-headless-mention
Last synced: about 5 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/imranbarbhuiya/react-native-headless-mention
- Owner: imranbarbhuiya
- License: mit
- Created: 2024-02-06T16:44:08.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-05-19T13:59:59.000Z (6 months ago)
- Last Synced: 2024-05-19T14:52:22.833Z (6 months ago)
- Language: TypeScript
- Size: 4.08 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# react-native-headless-mention
**A headless mention component for React Native.**
[](https://github.com/imranbarbhuiya/react-native-headless-mention/blob/main/LICENSE)
[](https://codecov.io/gh/imranbarbhuiya/react-native-headless-mention)
[](https://www.npmjs.com/package/react-native-headless-mention)
## 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.
```bash
npm i react-native-headless-mention
```
## Usage
### For mention with autocomplete
```tsx
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 (
{suggestions
.filter((one) => one.name.toLocaleLowerCase().includes(keyword.toLocaleLowerCase()))
.map((one) => (
onSuggestionPress(one)} style={{ padding: 12 }}>
{one.name}
))}
);
};
export default function Campaigns() {
const [value, setValue] = useState('');
return (
one.id === mention.id);
return user ? `@${user.name}` : `<@${mention.id}>`;
},
pattern: /<(?@)(?\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
```tsx
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: /<(?@)(?\d+)>/g,
renderPosition: 'bottom',
},
];
const values = parseValue(value, partTypes);
console.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
```tsx
import { useState, useRef, useEffect } from 'react';
import { Pressable, Text, View } from 'react-native';
import { Input } from 'react-native-headless-mention';
export default function Campaigns() {
const [value, setValue] = useState('');
return (
\S(?:.*?\S)?)\*\*/g,
},
{
textStyle: { textDecorationLine: 'underline' },
pattern: /__(?\S(?:.*?\S)?)__/g,
},
{
textStyle: { fontStyle: 'italic' },
pattern: /\*(?\S(?:.*?\S)?)\*/g,
},
{
textStyle: { fontStyle: 'italic' },
pattern: /_(?\S(?:.*?\S)?)_/g,
},
{
textStyle: { textDecorationLine: 'line-through' },
pattern: /~(?\S(?:.*?\S)?)~/g,
},
]}
value={value}
/>
);
}
```
## 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:
