0.15.0 • Published 10 months ago

@igloo-ui/tag-picker v0.15.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
10 months ago

TagPicker

A multiselect of items displayed as tags.

Installation

To install @igloo-ui/tag-picker in your project, you will need to run the following command using npm:

npm install @igloo-ui/tag-picker

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/tag-picker

Usage

Then to use the component in your code just import it!

import TagPicker from '@igloo-ui/tag-picker';
import { mockData } from './data';

const [selected, setSelected] = React.useState([]);
const [results, setResults] = React.useState([]);

const onInput = (value) => {
  setResults(
    mockData.filter(
      (d) =>
        d.text.toLowerCase().includes(value.toLowerCase()) &&
        !selected.includes(d)
    )
  );
};

const select = (id) => {
  const selectedItem = mockData.find((d) => d.id === id);
  if (selectedItem) {
    setSelected([...selected, selectedItem]);
  } else {
    setSelected([...selected]);
  }
};

const remove = (id) => {
  setSelected(selected.filter((s) => s.id !== id));
};

<TagPicker
  {...args}
  results={results}
  selectedResults={selected}
  onInput={onInput}
  onSelection={select}
  onTagRemove={remove}
  noResultsText="No results"
  placeholder="Enter Team or Bob"
/>;
0.15.0

10 months ago

0.14.1

10 months ago

0.13.0

1 year ago

0.14.0

11 months ago

0.13.1

11 months ago

0.12.5

1 year ago

0.12.4

1 year ago

0.12.3

1 year ago

0.12.2

1 year ago

0.12.1

1 year ago

0.12.0

1 year ago

0.11.0

1 year ago

0.10.0

1 year ago

0.9.0

1 year ago

0.9.1

1 year ago

0.8.1

1 year ago

0.8.0

1 year ago

0.6.7

1 year ago

0.7.0

1 year ago

0.6.6

1 year ago

0.6.5

2 years ago

0.6.4

2 years ago

0.6.3

2 years ago

0.6.2

2 years ago

0.5.0

2 years ago

0.4.1

2 years ago

0.3.2

2 years ago

0.4.0

2 years ago

0.3.1

2 years ago

0.6.1

2 years ago

0.6.0

2 years ago

0.3.3

2 years ago

0.3.0

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.0

3 years ago

0.0.0

3 years ago