README

ts-react-tag-select

example-pic

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

Usage no npm install needed!