MultiSelect Component with Tags

node version: 14.16.0

npm version: 7.7.6

About

This npm package creates a mulit-select react component which accepts a list of tags, width (overall width of the component) and input colorPickerArray. Custom functionalities:

1. Each TagRow is drag & dropable.
2. Each Tag's text & color is customiable.
3. Each TagRow can be edited & deletable.
4. Multiple Tags can be selected for the input.
5. A Tag can be discarded from the the input by clicking x icon.
6. New Tags can be created if they are not in list.

Please note

This package have some dependencies on antd Library & react-sortable-hoc.

For development

npm i 

npm run start

Quick Start

import MultiSelect from 'multiselect-component-with-tags';

const tagslist = [
  {
      id: 1,
      label: 'Lead',
      bgColor: 'aqua',
      leftIcon: null
  },
  {
      id: 2,
      label: 'DBC',
      bgColor: 'green',
      leftIcon: null
  },
  { 
      id: 3,
      label: 'Follow',
      bgColor: 'red',
      leftIcon: null
  },
  {
      id: 4,
      label: 'Query',
      bgColor: 'magenta',
      leftIcon: null
  },
  {
      id: 5,
      label: 'Bill',
      bgColor: 'aqua',
      leftIcon: null
  },
  {
      id: 6,
      label: 'Complaint',
      bgColor: 'pink',
      leftIcon: null
  },
]

const colorPickerArray = [
  '#B80000',
  '#DB3E00',
  '#FCCB00',
  '#008B02',
  '#006B76',
  '#1273DE',
  '#004DCF',
  '#5300EB',
  '#EB9694',
  '#FAD0C3',
  '#FEF3BD',
  '#C1E1C5',
  '#BEDADC',
  '#C4DEF6',
  '#BED3F3',
  '#D4C4FB',
];

function App() {
  return (
    <div>
      <MultiSelect
        width="258px"
        tagslist={tagslist}
        colorPickerArray={colorPickerArray}
      />
    </div>
  );
}
 
export default App;

For testing

npm test

For building

npm run build

development Environment

• Windows 10 (Intel i5 - 8th Gen, RAM - 12GB)
• Visual Studio Code
• Visual Studio code Extensions
  • Prettier - Code formatter
  • React Extension Pack
  • Path Intellisense

Test Coverage

Current test coverage is 42.85% (% lines) Click for more Details

npm package link

Storybook link

codesandbox link