Effortless #@ in React

React Tagify is a powerful and easy-to-use library that adds #tag and @mention support to your React applications. With this library, you can enable users to interact with tagged content and mentions within your application, enhancing the overall user experience.

How React Tagify works

React Tagify works by wrapping your content within a <Tagify> component, which then parses the text for #tags and @mentions. When a user clicks on a tag or mention, React Tagify triggers a callback function with the clicked text and type (tag or mention).

The library is easy to integrate into your existing applications, and you can customize the look and feel of the tags and mentions using CSS.

Use cases for React Tagify

React Tagify is perfect for applications like:

1. Social media platforms: Add hashtags and mention support to user-generated content, making it easier for users to interact with posts and discover related content.
2. Blogging platforms: Enable authors to tag their articles with relevant keywords, allowing readers to easily find similar articles and navigate your blog.
3. Content management systems: Add tagging functionality to your CMS, helping content creators and editors organize and classify content more effectively.

Getting started with React Tagify

To add React Tagify to your project, first, install the library using npm, yarn, or pnpm:

$ npm i react-tagify
$ yarn add react-tagify
$ pnpm i react-tagify

Next, import the Tagify component from the library and wrap your content with it:

import { Tagify } from "react-tagify";

<Tagify>
  <p>
    Check out our new blog post about #React and how to use @mentions!
  </p>
</Tagify>

To handle clicks on tags and mentions, pass an onClick callback function to the Tagify component:

<Tagify
  onClick={(text, type) => {
    console.log(`Clicked on ${text} of type ${type}`);
  }}
>
  <p>
    Check out our new blog post about #React and how to use @mentions!
  </p>
</Tagify>

You can also customize the appearance of tags and mentions using CSS:

<Tagify
  mentionStyle={{ color: "red" }}
  onClick={(text, type) => {
    console.log(`Clicked on ${text} of type ${type}`);
  }}
>
  <p>
    Check out our new blog post about #React and how to use @mentions!
  </p>
</Tagify>

React Tagify is a versatile and powerful library that can help you enhance your React applications with minimal effort. By adding hashtags and mention support to your projects, you can improve user interaction, discoverability, and content organization. Try it out today and see the difference it can make for your app!

NPM: https://www.npmjs.com/package/react-tagify

Github: https://github.com/cinaaaa/react-tagify

DEMO: https://react-tagify-site.vercel.app/