ts-react-tag-select v1.0.0

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

Properties for Tags

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

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} />