SinaMAlizadeh / tags-in-textarea

Enhance your projects with our intuitive tagging package, designed for seamless integration into your text content.

React Tags In Textarea

Enhance your projects with our intuitive tagging package, designed for seamless integration into your text content. Effortlessly define and embed customizable tags amidst text, providing users with the flexibility to craft and annotate their narratives. Ideal for organizing, highlighting, or categorizing text elements, our package empowers you to enrich your content, making it more interactive and informative. Perfect for developers seeking to add dynamic tagging capabilities to their React applications.(Demo)

Installation

The package can be installed via NPM:

npm i react-tags-in-textarea

Usage

Import Textarea for usage :

import { Textarea } from "react-tags-in-textarea";

Define your Textarea and config :

<Textarea
  defaultValue="my text"
  setValue={(value) => setValue(value)}
  dir="ltr"
  tags={[
    {
      label: "FirstName",
      value: "$FirstName$",
    },
    {
      label: "LastName",
      value: "$LastName$",
    },
    {
      label: "PhoneNumber",
      value: "$PhoneNumber$",
    },
  ]}
/>

User guide

Prop name	Description	Default value	Example values
dir	Direction of text content	ltr	"rtl" , "rtl"
tags	Tags you define and user see as button to add into text - Array	[]	[{ label: string;value: string;}]
defaultValue	Default value import in text in first render	Optional	"my first Text"
setValue	Function to call every time text change in textarea	(e: Tag) => void

Style

You can add style with className "textarea-content" , "tags-list-button" , "tags-button" , "tag" , "chatBox"