React-tag-builder NPM

react-tag-builder

npm-typescript License ]github-license-url

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

react react-component react-tag react-tag-field tag tag-field tag-input tagging tags

1.0.0

12 months ago