@synerise/ds-collector v1.1.4
id: collector
title: Collector
Collector UI Component
Installation
npm i @synerise/ds-collector
or
yarn add @synerise/ds-collector
Usage
import Collector from '@synerise/ds-collector'
<Collector
selected={["Selected 1"]}
suggestions={["Suggestions 1"]}
onConfirm={console.log}
onItemAdd={value => ({
text: value,
})}
texts={{ add: 'Add', cancel: 'Cancel', placeholder: "Please select values" }}
/>
Demo
API
Property | Description | Type | Default |
---|---|---|---|
allowMultipleValues | Enables an option to select multiple values | boolean | false |
addButtonProps | Props object applied to primary button | ButtonProps | - |
cancelButtonProps | Props object applied to secondary button | ButtonProps | - |
allowCustomValue | Enables an option to add value not included in the suggestions array | boolean | false |
className | Class added to the parent container | string | --- |
description | Description rendered below the main component | string / React.ReactNode | --- |
disabled | Whether the component is disabled. | boolean | false |
disableSearch | Disables an option to type value in the input. | boolean | false |
disableButtonPanel | Hides the right-hand side panel with "cancel" and "add" buttons | boolean | false |
dropdownContent | Custom content of the dropdown displayed when component is focused | React.ReactNode | false |
dropdownItemHeight | Enable setting size in dropdown items | 'large' | --- |
enableCustomFilteringSuggestions | Disable filtering suggestions inside component | boolean | false |
errorText | error message, if provided input will be set in error state | string | --- |
error | If provided an input will be set in error state, without error message | boolean | --- |
fixedHeight | If provided, an input will preserve the constant height value | boolean | false |
label | Label rendered above the input | string / React.ReactNode | --- |
lookupConfig | Config for keys used to filter and display suggestions values | {display: string, filter: string} | --- |
keepSearchQueryOnSelect | If provided, an input will preserve its value after selecting an item | boolean | false |
onConfirm | Callback executed when user clicks "add" button | (values: CollectorValue[]) => void | --- |
onCancel | Callback executed when user clicks "cancel" button | () => void | --- |
onItemSelect | Callback executed when user selects an item | (value: CollectorValue) => void | --- |
onItemDeselect | Callback executed when user removes already selected item | (value: CollectorValue) => void | --- |
onMultipleItemsSelect | Callback executed when user pastes multiple items | (values: CollectorValue[]) => void | --- |
onItemAdd | Callback executed when user adds a custom item to the list. | (itemName: React.ReactText) => CollectorValue | --- |
onSearchValueChange | Callback executed when user changes the value of the input | (value: string) => void | --- |
renderItem | Custom function for rendering a custom item inside dropdown | (value: CollectorValue) => JSX.Element | --- |
showNavigationHints | Renders navigation hint panel at the bottom of the dropdown | boolean | false |
searchValue | Value of the input | string | [] |
selected | Array of items which are already selected | CollectorValue[] | [] |
suggestions | Array of items which are displayed when showing suggestions dropdown | CollectorValue[] | [] |
texts | Texts object for the component | CollectorTexts | {} |
scrollbarProps | Object with scrollbar configturaion | ScrollbarAdditionalProps | - |
allowPaste | Object with scrollbar configturaion | boolean | - |
showCount | Display item counter above collector | boolean | - |
valuesSeparator | Multi-value paste delimiter (separator) | CollectorValuesSeparator ; , / or , | ; |
listHeader | Custom header displayed at the top of the dropdown list | React.ReactNode | - |
hideDropdownOnClickOutside | Specify whether dropdown should be closed on click outside | boolean | true |
CollectorValue = {[key:string]: any}
CollectorTexts
Property | Description | Type | Default |
---|---|---|---|
add | Text inside primary 'Add' button | string / React.ReactNode | --- |
cancel | Text inside ghost 'Cancel' button | string / React.ReactNode | --- |
placeholder | Placeholder for the input inside Collector | string | --- |
toNavigate | Text inside navigation hint panel | string / React.ReactNode | --- |
toSelect | Text inside navigation hint panel | string / React.ReactNode | --- |
5 months ago
5 months ago
4 months ago
5 months ago
5 months ago
7 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago