ts-react-tag-select

Look and Feel

Abstract:

Here you will find a ReactJS component with which you can display your data as selectable tags.

Features:

• Design based on Material-UI
• Properties to help you with an individual design
• Functions as properties to help with the further use of the data
• Suggestion filter
• TypeScript implementation
• ...

Installation

npm install --save ts-react-tag-select

Usage

import {
    TagSelect
} from 'ts-react-tag-select';

...

<TagSelect />

CSS

./node_modules/ts-react-tag-select/dist/index.css;

Properties

| Property | Type | Required | Default | Info | | -------------------- | ------- | -------- | ----------------- | ----------------------------------------------- | | contentHeight | number | false | 120 | | | onDeselectTag | func | false | noop | first argument is an array of updated tags | | onSearch | func | false | noop | first argument is an array with filtered tags | | onSuggestionClick | func | false | noop | first argument is an object with tag properties | | onToggleSelect | func | false | noop | first argument is an array of updated tags | | showSuggestion | boolean | false | true | | | showSuggestionAvatar | boolean | false | true | | | showSuggestionInput | boolean | false | true | | | showSuggestionValue | boolean | false | true | | | showTags | boolean | false | true | | | subClass | string | false | '' | | | suggestionHeight | number | false | 240 | | | suggestionLabel | string | false | Filter | | | tags | array | false | Default Demo Tags | |

Properties for Tags

We are implementing the properties of the https://www.npmjs.com/package/ts-react-tag module and adding the following elements:

| Property | Type | Info | | ------------ | ------- | --------------------- | | isSelected | boolean | Set tag as selected | | isSelectable | boolean | Set tag as selectable |

We recommend a unique ID for tag item so that the functionality of the component is guaranteed.

Example for an array of tags:

const myTagList = [];

myTagList.push({
  color: 'default',
  id: 'demo-tag-1',
  label: 'Demo-Tag-1',
  value: 3,
  valueColor: 'primary',
  variant: 'outlined',
  isSelected: true,
  isSelectable: true,
  hideOnDelete: false,
  avatarSrc: 'http://www.gravatar.com/avatar/3b3be63a4c2a439b013787725dfce802?d=identicon',
});

myTagList.push({
  color: 'primary',
  id: 'demo-tag-2',
  label: 'Demo-Tag-2',
  value: 1,
  valueColor: 'secondary',
  isSelected: true,
  isSelectable: true,
  hideOnDelete: false,
  avatarSrc: 'http://www.gravatar.com/avatar/3b3be63a4c2a439b013787725dfce802?d=identicon',
});

myTagList.push({
  color: 'secondary',
  id: 'demo-tag-3',
  label: 'Demo-Tag-3',
  value: -20,
  valueColor: 'primary',
  isSelected: true,
  isSelectable: true,
  hideOnDelete: false,
  avatarSrc: 'http://www.gravatar.com/avatar/3b3be63a4c2a439b013787725dfce802?d=identicon',
});

...

<TagSelect tags={myTagList} />