@crpt/react-select

react-select

SingleSelect and MultiSelect React components.

Install

npm i --save @crpt/react-select

Usage

import { SingleSelect, MultiSelect } from "@crpt/react-select";

<SingleSelect onSelect={val => console.log(vaL)} values={[{id:1, title: "Left"}, {id:2, title: "Right"]} />

SingleSelect

PropName	Description	Example
values: Array (Required)	Values. See Note1	<SingleSelect values=[{id:1, title: "value 1"}, {id: 2, title: "value 2"}] />
disabled: Boolean	Can be disabled.	<SingleSelect disabled />
onSelect: Function	Callback for select event.	<SingleSelect onSelect={val => console.log(val)} />
onChange: Function	Callback for change event
placeholder: String	Placeholder value.	<SingleSelect placeholder="Some placeholder" />
savePlaceholder: Boolean	When true, placeholder's text is placed on top if any of value is selected and in the center otherwise
selectedId: Integer	If passed, child with id = selectedId becomes selected.	<SingleSelect values=[{id:1, title: "value 1"}, {id: 2, title: "value 2"}] selectedId={2} />
truncate: Boolean	Long text truncation. Select options width will not exceed input width.	<SingleSelect truncate values=[{id:1, title: "very looong text"}] />
multiline: Boolean	Long text wrap.	<SingleSelect multiline values=[{id:1, title: "very looong text"}] />
isLoading: Boolean	If true, there is "Загрузка..." displayed on drop list
RenderValues: React element or function	It is a function for rendering title to inputText.	See note 2.
RenderOption: React element or function	It is rendered instead of all of titles in values (working with renderValue)
RenderIcon: React element or function	It is rendered instead of option selected icon
onRef	Return {this of SingleSelect} in componentDidMount and undefined in componentWillUnmount
hideOptionsPanel: Boolean	If true optionList isn't shown
withoutIcon: Boolean	Seach and BottomArrow Icons are not shown when properties is true
filterDisabled: Boolean	When you are writing in text field, option list is filtered using typing text. If filterDisabled is true optionList isn't filtered
iconPosition: String	Icon position. Default: 'right'
showPointer: Boolean	Show options panel dialog pointer. Default: false
noValuesText: String	Show text if values empty
onTogglePanel: Function	Callback on toggle Options Panel
rightIconReplacer: JSX expression	replaces right icon
Note1. Values is array of objects. You can add any properties and then use renderValue or renderOption for render them. But some properties are special.

Property name	Property type	Property description
id (required)	Number	Must be unique integer
value (required)	String or element	Value is returned on onSelect
title (required)	String or element	Title is shown on the text field after the select
titleText	String or element	Title for textField. If undefined title field is displayed
titleOption	String or element	Title for optionList. If undefined title field is displayed
filterString	String	If defined filter process use this properties instead of title
disabled	Boolean	Can't select option if disabled

Examples of title:

• simple title:

title: 'empty'

• object title:

title: (
  <div>
    Title <b>text</b> here
  </div>)

Note 2 RenderOption. Values item properties are passed to function using value propertie. Renders function example: RenderValue. Values item properties are passed to function using selected and value (it's the same) property. Renders function example:

const renderOption = (props) => (
  <div>
    To option field:<br/>
    <b>{props.value.prop1}</b><br/>
    <i>{props.value.prop2}</i>
  </div>
);

MultiSelect

PropName	Description	Example
values: Array (Required)	Values.	<MultiSelect values=[{id:1, title: "value 1"}, {id: 2, title: "value 2"}] />
disabled: Boolean	Can be disabled.	<MultiSelect disabled />
onSelect: Function	Callback for select event.	<MultiSelect onSelect={val => console.log(val)} />
placeholder: String	Placeholder value.	<MultiSelect placeholder="Some placeholder" />
selectedIds: Array	If passed, childs with id in selectedIds becomes selected.	<MultiSelect values=[{id:1, title: "value 1"}, {id: 2, title: "value 2"}] selectedIds={[1,2]} />
truncate: Boolean	Long text truncation. Select options width will not exceed input width.	<MultiSelect truncate values=[{id:1, title: "very looong text"}] />
multiline: Boolean	Long text wrap.	<MultiSelect multiline values=[{id:1, title: "very looong text"}] />
iconPosition: String	Icon position. Default: 'right'
showPointer: Boolean	Show options panel dialog pointer. Default: false
noValuesText: String	Show text if values empty
onTogglePanel: Function	Callback on toggle Options Panel