Yed-tag-input NPM

yed-tag-input

yed-tag-input

Install

npm install --save yed-tag-input

Demo

Demo.

Usage

import React, { useState } from 'react'

import YedTagInput from 'yed-tag-input'
import 'yed-tag-input/dist/index.css'

const Example=()=>{
  const initTags: Array<any> = []
  const [tags, setTags] = useState(initTags)
  const setTag = (tag: any) => {
    setTags([...tags, tag])
  }
  const deleteTag = (item: any) => {
    const deletedTags = JSON.parse(JSON.stringify(tags))
    deletedTags.splice(item.index, 1)
    setTags(deletedTags)
  }
  return (
      <YedTagInput tags={tags} tagInputErrorControl={true}  tagInpuTitle={'Kişileri Ekle'} onChange={setTag}  removeTag={(item) => {deleteTag(item)}}  />
   )

}
export default Example

Props

Props Name	Description	Default Value	Required
tags	The tag array that the input element contains	null	true
tagInputErrorControl	Specifies whether the tag input element will control elements of the same value	false	false
tagInpuTitle	The title value of the tag input element	null	false
tagColor	Background color of tags	colorBlue	false
textColor	Text color of tags	#fff	false
tagInputTitleColor	The title color of the tag input element	#9799a7	false
errorText	The value that tag input element will take in case of error	Etiket daha önce kullanıldı.	false
tagInputErrorColor	Determines the color of the text shown in the error state of the tag input element	#ff4d4f	false

Functions

Function Name	Description	Required	Return Value
onChange	Works when a new tag is added	true	tag(string)
removeTag	Works when a tag is deleted from the list	true	The value to be deleted and the sequence number of the value to be deleted ({index, item})