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}
texts={{ add: 'Add', cancel: 'Cancel', placeholder: "Please select values" }}
/>

Demo

API

PropertyDescriptionTypeDefault
allowMultipleValuesEnables an option to select multiple valuesbooleanfalse
allowCustomValueEnables an option to add value not included in the suggestions arraybooleanfalse
classNameClass added to the parent containerstring---
descriptionDescription rendered below the main componentstring / React.ReactNode---
disabledWhether the component is disabled.booleanfalse
disableSearchDisables an option to type value in the input.booleanfalse
disableButtonPanelHides the right-hand side panel with "cancel" and "add" buttonsbooleanfalse
dropdownContentCustom content of the dropdown displayed when component is focusedReact.ReactNodefalse
dropdownItemHeightEnable setting size in dropdown items'large'---
errorTexterror message, if provided input will be set in error statestring---
errorIf provided input will be set in error state, without error messageboolean---
fixedHeightIf provided, Input will preserve the constant height valuebooleanfalse
labelLabel rendered above the inputstring / React.ReactNode---
lookupConfigConfig for keys used to filter and display suggestions values{display: string, filter: string}---
onConfirmCallback executed when user clicks "add" button(values: CollectorValue[]) => void---
onCancelCallback executed when user clicks "cancel" button() => void---
onDeselectCallback executed when user removes already selected item(value: CollectorValue) => void---
onItemAddCallback executed when user adds a custom item to the list.(itemName: React.ReactText) => CollectorValue---
onSearchValueChangeCallback executed when user changes the value of the input(value: string) => void---
showNavigationHintsRenders navigation hint panel at the bottom of the dropdownbooleanfalse
searchValueValue of the inputstring[]
selectedArray of items which are already selectedCollectorValue[][]
suggestionsArray of items which are displayed when showing suggestions dropdownCollectorValue[][]
textsTexts object for the componentCollectorTexts{}

CollectorValue = {[key:string]: any}

CollectorTexts

PropertyDescriptionTypeDefault
addText inside primary 'Add' buttonstring / React.ReactNode---
cancelText inside ghost 'Cancel' buttonstring / React.ReactNode---
placeholderPlaceholder for the input inside Collectorstring---
toNavigateText inside navigation hint panelstring / React.ReactNode---
toSelectText inside navigation hint panelstring / React.ReactNode---