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