TagsInput

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

Copy
import { TagsInput } from 'minerva-ui';

() => {
  const [tags, setTags] = useState([]);
  const [inputVal, setInputVal] = 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] = useState([]);
  const [inputVal, setInputVal] = 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.