react-autocomplete-tag

A simple autocomplete tagging component for react app with typescript support

Screenshot 1

Screenshot 2

Requirements

• react: ^16.0.0

Features

• Autocomplete based on suggestion list
• Keyboard friendly and mouse support

Install

npm install --save react-autocomplete-tag

Usage

import React, { useState } from 'react'

import ReactTags from 'react-autocomplete-tag' // load ReactTags component
import 'react-autocomplete-tag/dist/index.css' // load default style

const App = () => {
  const tagList: string[] = [
    'America',
    'Argentina',
    'Africa',
    'Bangladesh',
    'Burma',
    'China',
    'Chile',
    'Denmark',
    'England'
  ]

  var [tags, setTags] = useState<string[]>([])

  const [suggestions, setSuggestions] = useState<string[]>([])

  const addTag = (val: string) => {
    setTags([...tags, val])
    setSuggestions([])
  }

  const removeTag = (idx: number) => {
    var t = [...tags]
    t.splice(idx, 1)
    setTags(t)
  }

  const handleTagChange = (val: string) => {
    // in real app, suggestions could be fetched from backend

    if (val.length > 0) {
      var new_sug: string[] = []
      tagList.forEach((t) => {
        if (t.includes(val)) {
          new_sug.push(t)
        }
      })
      setSuggestions(new_sug)
    } else {
      setSuggestions([])
    }
  }

  return (
    <ReactTags
      tags={tags}
      suggestions={suggestions}
      onAddHandler={(val: string) => addTag(val)}
      onDeleteHandler={(idx: number) => removeTag(idx)}
      onChangeHandler={(val: string) => handleTagChange(val)}
    />
  )
}

export default App

Options

| Option | Type | Default Value | Require / Optional | Description | | --------------- | --------------- | -------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | | tags | Array of String | [] | Require | An array of tags that are displayed as pre-selected | | suggestions | Array of String | [] | Require | An array of suggestions | | placeholder | String | Enter a tag | Optional | The placeholder for tag input | | delimeters | Array of String | ["Enter", ","] | Optional | Specifies which characters should terminate tags input | | onAddHandler | Function | undefined | Require | Function called when the user wants to add a tag | | onDeleteHandler | Function | undefined | Require | Function called when the user deletes a tag | | onChangeHandler | Function | undefined | Optional | Function called when the tag input value change. You can fetch the suggestions from backend based on tag input value and update su |

License

MIT © joenayjoe