cinaaaa / react-tagify

✨ Empower React applications with effortless #tag and @mention support

✨ React Tagify #️@

Empower your React applications with effortless #tag and @mention support ❤️

React Tagify is a powerful and pure React component for handling hashtags and mentions in your React app with ease. Give your users the ability to mention others and add tags to their content seamlessly.

For more information and demo, visit our website here.

Features

• 🚀 Easy to integrate
• 🎨 Customizable colors and styles
• 🔗 Supports #HashTags and @Mentions
• 📦 Lightweight

Installation

Install the package using npm or yarn:

npm i react-tagify

or

yarn add react-tagify

Usage

1. Import the Tagify component:

import { Tagify } from 'react-tagify';

2. Wrap your content with the Tagify component:

<Tagify
  onClick={(text, type) => console.log(text, type)}
>
  <p>
    This is a #React component with help of #ReactTagify!
  </p>
</Tagify>

Props

Prop	Type	Default	Description
children	ReactNode	-	The content to be processed for tags and mentions.
color	string	'#0073e6'	The color of the tags and mentions.
onClick	function	-	A callback function that is called when a tag or mention is clicked. Receives the clicked element as an argument and type of it
tagStyle	object	-	The CSS style object for hashtag styling.
mentionStyle	object	-	The CSS style object for mention styling.
detectHashtags	boolean	true	Enable or disable the detection of hashtags.
detectMentions	boolean	true	Enable or disable the detection of mentions.

Contributing

Please feel free to contribute by submitting a pull request or reporting any issues you encounter while using this component.

License

React Tagify is licensed under the MIT License.

react-tagify's Issues

Make Document Cool and Pretty !

Anyone Who Can Make A Simple Clear Document's for this project

Tests for new Link Feature

Is your feature request related to a problem? Please describe.
We Have New Feature for Detecting Links in our component and we dont have tests for it

Describe the solution you'd like
similar test like other for this.

Hover functionality for hashtag and mention

Hi Sina, hope you are doing well and thanks for the awesome library.

Currently Hashtags and mentions are clickable. it that possible for you to add Hover functionality for those?
I need to show a popup for mentions.

thanks in advance.

New Test's For tagStyle & mentionStyle

New Test Code's Added To React Tagify but In This Week Something's Added to our project
and We Don't Have Test Code For Them : )
tag style
&
mention style
.
.
Thanks to @theashraf ...

Any Improvement Accepted : )

Any Improvement accepted for project but make attention to the topic of this project " React Tagify"

Writing Test for Code's

Is your feature request related to a problem? Please describe.
I Need Good and Clear Testing Code for Our Project
You'r All Welcome

Cool Documentation Need + (Animation's ex)

We Love Cool Animation for Our Project ... Please Attach Gifs and Modern Design Concepts to Show Demo Of Our Project