https://github.com/akkisagiraju/react-simple-tags

A simple tags input component written in React
https://github.com/akkisagiraju/react-simple-tags

component input react tags tagsinput

Last synced: 6 months ago
JSON representation

A simple tags input component written in React

• Host: GitHub
• URL: https://github.com/akkisagiraju/react-simple-tags
• Owner: akkisagiraju
• License: mit
• Created: 2021-04-12T18:43:47.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-06-01T14:22:31.000Z (about 5 years ago)
• Last Synced: 2025-08-09T14:50:17.561Z (11 months ago)
• Topics: component, input, react, tags, tagsinput
• Language: TypeScript
• Homepage: https://akhilsagiraju.com/react-simple-tags/
• Size: 586 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-simple-tags

A simple tags input component written in React.

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

# Features

- 🚀 Simple and lightweight (< 700 bytes when gzipped!)

- ✅ Easy to use

- 🎨 Customizable styles

## Install

```bash

npm install --save react-simple-tags

```

## Usage

```tsx

import React from 'react'

import TagsInput from 'react-simple-tags'

import 'react-simple-tags/dist/index.css'

const App = () => {

  const [tagsList, setTagsList] = React.useState([])

  const handleTagAddition = (tag: string) => {

    const newTagsList = tagsList.concat(tag)

    setTagsList(newTagsList)

  }

  const handleTagRemoval = (tagToBeRemoved: string) => {

    const newTagsList = tagsList.filter((tag) => tag !== tagToBeRemoved)

    setTagsList(newTagsList)

  }

  return (

    

  )

}

export default App

```

# Props

| Prop            | Type    | Required? | Default value |

| --------------- | ------- | --------- | ------------- |

| `maxTagLength`  | number  | no        | `3`           |

| `uniqueTags`    | boolean | no        | `true`        |

| `className`     | string  | no        | empty string  |

| `onTagAddition` | func    | yes       | N/A           |

| `onTagRemoval`  | func    | yes       | N/A           |

## License

MIT © [akkisagiraju](https://github.com/akkisagiraju)