ts-react-tag-select

Scheduler component based on TypeScript and ReactJS

Usage no npm install needed!

<script type="module">
  import tsReactTagSelect from 'https://cdn.skypack.dev/ts-react-tag-select';
</script>

README

ts-react-tag-select


example-pic


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