Installation

To install a component run

$ npm install @hawk-ui/tags-input --save

Please import CSS styles via

1@import '/path__to__node_modules/@hawk-ui/tags-input/dist/index.min.css

Usage

Tags Input

Demo

1import TagsInput from '@hawk-ui/tags-input';

1const suggestions = [
2  {title: 'Argentina', value: 'argentina'},
3  {title: 'Australia', value: 'australia'},
4  {title: 'Belgium', value: 'belgium'},
5  {title: 'Bhutan', value: 'bhutan' },
6  {title: 'Brazil', value: 'brazil' },
7  {title: 'Canada', value: 'canada' },
8  {title: 'China', value: 'china' },
9  {title: 'Colombia', value: 'colombia' },
10  {title: 'Egypt', value: 'egypt' },
11  {title: 'Finland', value: 'finland' },
12  {title: 'Georgia', value: 'georgia' },
13  {title: 'Germany', value: 'germany' },
14  {title: 'India', value: 'india' },
15  {title: 'Indonesia', value: 'indonesia' },
16];
17
18initialState = {
19  suggestionContent: suggestions,
20  selectedItem: [],
21  searchValue: '',
22};
23
24<TagsInput
25  label="Tags Input"
26  suggestions={state.suggestionContent}
27  placeholder="Select anyone"
28  searchValue={state.searchValue}
29  onChange={(event) => {
30    setState({
31      searchValue: event.target.value,
32    })
33  }}
34  searchContent={['title']}
35  renderSuggestion={(suggestion) => suggestion.title}
36  messageIfEmpty="No Item Found"
37  onAddTag={(item, meta) => {
38    if (meta.isSuggestion) {
39      setState(prevState => ({
40        selectedItem: [...prevState.selectedItem, item.value],
41        searchValue: '',
42      }));
43    } else {
44      setState(prevState => ({
45        selectedItem: [...prevState.selectedItem, item],
46        searchValue: '',
47      }));
48    }
49  }}
50  onRemoveTag={(item, index, meta) => {
51    setState({
52      selectedItem: state.selectedItem.filter((item, i) => i !== index),
53    });
54  }}
55  tags={state.selectedItem}
56  renderTag={tag => tag}
57  isRequired
58  isError
59  errorMessage="This field is a compulsory field."
60/>