react-tag-builder

A customizable tag input component for React.

Features

• Add tags by typing and pressing Enter.
• Click on a tag to trigger custom behavior.
• Customize the appearance of the input field and tags.
• Initialize with default tags.
• Written in TypeScript.

Installation

npm install react-tag-builder

Usage

Here's a basic example of how to use the TagInput component:

import React from 'react'
import TagInput from 'react-tag-builder'

const App: React.FC = () => {
  return (
    <div>
      <TagInput
        defaultTags={['React', 'JavaScript', 'TypeScript']}
        onChange={(tags) => console.log('Tags: ', tags)}
        onClick={(tag) => console.log('Clicked tag: ', tag)}
      />
    </div>
  )
}

export default App

Props

| Prop | Type | Description | | ---------------- | -------------------------- | ------------------------------------------------------------- | | defaultTags | string[] | An array of tags to initialize the input with. | | onChange | (tags: string[]) => void | A callback function that is called whenever the tags change. | | onClick | (tag: string) => void | A callback function that is called whenever a tag is clicked. | | inputClassName | string | A class name to apply to the input field. | | tagClassName | string | A class name to apply to the tags. | | tagStyle | React.CSSProperties | A style object to apply to the tags. | | inputStyle | React.CSSProperties | A style object to apply to the input field. | | placeholder | string | A placeholder to display in the input field. | | separator | string | A string to use as the separator between tags. | | validator | (tag: string) => boolean | A function that returns true if the tag is valid. |

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT