@crpt/react-select v1.2.1
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 |
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
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago