React-field-tag NPM

ReactFieldTag

React library for tag inputs

Install

npm install --save react-field-tag

Usage

import React from 'react'

import ReactFieldTag from 'react-field-tag'

/// add below line to use default styling
import 'react-field-tag/dist/index.css'

const App = () => {
  const [tags, setTags] = React.useState<Array<string>>([]);

  const onAdd = (tag: string) => {
    setTags([...tags, tag]);
  }

  const onDelete = (index: number) => {
    setTags(tags.filter((_, i) => i !== index));
  }

  return <ReactFieldTag tags={tags} onAdd={onAdd} onDelete={onDelete} />
}

export default App

Demo

StyleClasses

Type declaration

Name	Type	Description
`root?`	string	style class for the whole input and tag container
`input?`	string	style class for input
`tags?`	string	style class for tags container
`tag?`	string	style class for tag(s)

ReactFieldTagProps

Type declaration

Name	Type	Description	Default
`tags`	Array of string	an array of tags	-
`delimiter?`	string	determines a point at which the string separates into tags	`,`
`classes?`	StyleClasses	style classes for styling	-
`closeIcon?`	ReactElement	element to be used as close icon	`x` (close icon from icons8)
`onAdd`	function	a callback function called when a new tag is to be added	-
`onDelete`	function	a callback function called on deleting a tag	-