react-tag-input-component icon indicating copy to clipboard operation
react-tag-input-component copied to clipboard

Feature request: Set max number of tags?

Open clipartinc opened this issue 1 year ago • 1 comments

I'm wanting to set a max number of tags. Anyone know how to do this?

clipartinc avatar Sep 19 '23 03:09 clipartinc

Not the best case but you can do this:


const [availableKeywords, setAvailableKeywords] = useState<string>("Max. 10 keywords")

useEffect(() => {
   setAvailableKeywords(keywords.length === 0 ? `Max. 10 keywords` : `${10-keywords.length} keywords left`)
}, [keywords])

const checkMaxLengthkeywords = () => {
   return keywords.length < 10 ? true : false
}

return (
  <TagsInput
      classNames={{tag: 'keywordTag', input: 'inputImg'}}
      value={keywords}
      onChange={setKeywords}
      name="keywords"
      separators={["Enter",","]}
      placeHolder={availableKeywords}
      beforeAddValidate={checkMaxLengthkeywords}
  />
)

tomyedlp avatar Dec 13 '23 03:12 tomyedlp