@crpt/react-select

react-select react component

Stats

StarsIssuesVersionUpdatedCreatedSize
@crpt/react-select
0161.2.12 years ago3 years agoMinified + gzip package size for @crpt/react-select in KB

Readme

react-select

Travis npm package Coveralls

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.