tsdev-react-tag-select

Installation

npm install tsdev-react-tag-select

Properties

| name | type | default | required | |------|------|---------|----------| | availableItems | array of objects | << availableItems >> | no | | disabled | bool | false | no | | expanded | bool | false | no | | handleCloseTag | func | noop | no | | handleSelectBoxClick | func | noop | no | | id | string | 'tsdev-tag-select-{uuid}' | no | | isClosable | bool | true | no | | placeholder | string | 'Please Selects' | no | | showSummary | bool | true | no | | showValue | bool | false | no | | subClass | string | '' | no | | width | string, number | '123' | no |

Static Storybook

• open with browser '/storybook-static/index.html'

Examples

• open with browser '/dist/examples/index.html'

Styles

• '/dist/styles.css'

Functions

handleCloseTag(event, tag) => {
	console.log(event);
	console.log(tag);
}

handleSelectBoxClick(event, item, availableItems) => {
	console.log(event);
	console.log(item);
	console.log(item);
}

<< availableItems >>

[
        {
            id: 1,
            label: 'Item-1',
            value: 10,
            selected: false,
            disabled: false
        },
        {
            id: 2,
            label: 'Item-2',
            value: 20,
            selected: false,
            disabled: false
        },
        {
            id: 3,
            label: 'Item-3',
            value: 30,
            selected: true,
            disabled: false
        },
        {
            id: 4,
            label: 'Item-4',
            value: 40,
            selected: false,
            disabled: false
        },
        {
            id: 5,
            label: 'Item-5',
            value: 50,
            selected: true,
            disabled: true
        }
    ]