React Mention Hash Editor

A customizable React component for handling mentions (@username) and hashtags (#topic) within a rich text editor. Perfect for chat apps, social media, and collaborative platforms.

Features

• Mentions & Hashtags: Detects and styles @mentions and #hashtags.
• Customizable: Easily style and configure triggers.
• Keyboard Navigation: Navigate suggestions with keyboard.
• Copy/Paste Support: Handles mentions and hashtags on paste.
• Accessibility: Keyboard and screen reader friendly.

Installation

npm install react-mention-hash-editor
# or
yarn add react-mention-hash-editor

Usage

import React from 'react';
import { TextEditor } from 'react-mention-hash-editor';

function App() {
    const handleChange = (content) => {
        console.log(content);
    };

    return (
          <TextEditor onTextChange={setPostText} userList={friendList.map(u => {
          {
            return {
              id: u.userId,
              name: `${u.firstName} ${u.lastName}`,
              image: u.profilePictureUrl,
              designation: u.designation
            }
          }
        })} />
    );
}

export default App;

Props

| Prop | Type | Description | |---------------------|------------|--------------------------------------------------| | onTextChange | function | Callback when content changes | | userList | array | List of mention suggestions |

Customization

License

MIT

Business Use & Customization

Note: This package is shared freely for the open-source community as a personal learning effort. No commercial services are being offered.

📧 Email: [email protected] 📱 Phone / WhatsApp: +94 71 987 6231

Author

Lakmal Siyambalage