https://github.com/101loop/react-field-tag

React library for tag inputs
https://github.com/101loop/react-field-tag

field-tag input-tag react react-field-tag react-library reactjs tag tag-input

Last synced: about 2 months ago
JSON representation

React library for tag inputs

• Host: GitHub
• URL: https://github.com/101loop/react-field-tag
• Owner: 101Loop
• License: mit
• Created: 2022-01-26T11:04:51.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-01-27T08:20:16.000Z (almost 3 years ago)
• Last Synced: 2024-11-04T23:21:27.530Z (2 months ago)
• Topics: field-tag, input-tag, react, react-field-tag, react-library, reactjs, tag, tag-input
• Language: TypeScript
• Homepage:
• Size: 908 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ReactFieldTag

> React library for tag inputs

[![NPM](https://img.shields.io/npm/v/react-field-tag.svg)](https://www.npmjs.com/package/react-field-tag) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

npm install --save react-field-tag

```

## Usage

```tsx

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>([]);

  const onAdd = (tag: string) => {

    setTags([...tags, tag]);

  }

  const onDelete = (index: number) => {

    setTags(tags.filter((_, i) => i !== index));

  }

  return 

}

export default App

```

## Demo

![Demo](https://github.com/iamdipanshusingh/React-Field-Tag/blob/master/docs/demo.gif)

## Table of contents

- [StyleClasses](#StyleClasses)

- [ReactFieldTagProps](#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](#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](https://github.com/iamdipanshusingh)