0.15.0 • Published 10 months ago
@igloo-ui/tag-picker v0.15.0
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