1.0.6 • Published 3 months ago
react-tags-in-textarea v1.0.6
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-textareaUsage
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"