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

Table of contents

• StyleClasses
• ReactFieldTagProps

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 | - |

License

MIT © iamdipanshusingh