TagsInput

The <TagsInput /> component can be used to collect a list of inputs from the user.

import { TagsInput } from 'minerva-ui'

Preview

Source

() => {
  const [tags, setTags] = React.useState([]);
  const [inputVal, setInputVal] = React.useState('');

  const addTag = e => {
    setTags([...tags, inputVal]);
    setInputVal('');
  };

  const removeTag = index => {
    const updatedTags = tags.filter((_, i) => i !== index);
    setTags(updatedTags);
  };

  return (
    <TagsInput
      value={inputVal}
      tags={tags}
      onKeyDown={e => {
        if (e.key === 'Enter' && inputVal) {
          addTag();
        }
        if (e.key === 'Backspace' && !inputVal) {
          removeTag(tags.length - 1);
        }
      }}
      onChange={e => setInputVal(e.target.value)}
      onClickIcon={removeTag}
    />
  );
}

() => {
  const [tags, setTags] = React.useState([]);
  const [inputVal, setInputVal] = React.useState('');
  const addTag = e => {
    setTags([...tags, inputVal]);
    setInputVal('');
  };
  const removeTag = index => {
    const updatedTags = tags.filter((_, i) => i !== index);
    setTags(updatedTags);
  };
  return (
    <TagsInput
      value={inputVal}
      tags={tags}
      onKeyDown={e => {
        if (e.key === 'Enter' && inputVal) {
          addTag();
        }
        if (e.key === 'Backspace' && !inputVal) {
          removeTag(tags.length - 1);
        }
      }}
      onChange={e => setInputVal(e.target.value)}
      onClickIcon={removeTag}
    />
  );
}

Props

These are props related to the Tags Input component.

Name	Type	Is Required	Default	Description
`tags`	[string]	required	false	Array of tags to display
`onClickIcon`	function	required	none	Action to take when the icon is clicked

#Props

Props