@synerise/ds-collector NPM

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

@synerise/ds-button @synerise/ds-divider @synerise/ds-icon @synerise/ds-input @synerise/ds-list-item @synerise/ds-menu @synerise/ds-scrollbar @synerise/ds-search @synerise/ds-utils classnames

@infinitebrahmanuniverse/nolb-_syn @everything-registry/sub-chunk-889 @zalastax/nolb-_syn

5 days ago

11 days ago

13 days ago

13 days ago

21 days ago

26 days ago

29 days ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

11 months ago

7 months ago

7 months ago

7 months ago

8 months ago

7 months ago

7 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

6 months ago

6 months ago

6 months ago

11 months ago

11 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

2 years 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

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

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

3 years ago

3 years ago

3 years ago

3 years ago

3 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