Skip to content

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

Notifications You must be signed in to change notification settings

cinaaaa/react-tagify

Repository files navigation

React Tagify Promo Tweet

✨ 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';
  1. 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.