React Select Item

Simple and awesome react select component for rendering Select with options, complete with react ^14.0 Search inside options supported. Writing by ES2015.

Version 3.1.0 released CHANGELOG

Demo

Installation

$ npm install react-select-item --save

Features

1. Very customizable components, you can see very different usage in Demo Just extend default option or label and re-define render function by you own needed

class CustomOption extends Option<IOptionProps, {}> {
    /**
     * Available props:
     *
     * getOptionProps: (option: any) => {};
     * onClick: (value: any) => void;
     * selected: boolean;
     * option: any;
     * @param props
     */
    constructor(props) {
        super(props);
    }

    public render() {
        const {option} = this.props;
        return (
            <div {...this.getOptionProps()}>
                <span className="option-name"> {option.name}</span>
                <span className="option-date"> {option.value.creationTs || option.creationTs} </span>
            </div>
        );
    }
}

2. Adaptive options format You can use value as object with "id" key or plaint value with text or number, in one time it works!

 const optionsList = [
            {
                disabled: true,
                name: "Red",
                value: {id: "red", creationTs: "20.01.2017 - 16:53:24"},
            },
            {
                name: "Blue",
                value: {id: "blue", creationTs: "20.01.2017 - 16:53:24"},
            },
            {
                name: "Yellow",
                value: {id: "yellow", creationTs: "20.01.2017 - 16:53:24"},
            },
            {
                creationTs: "20.01.2017 - 16:53:24",
                name: "Orange",
                value: "orange",
            },
        ];

3. Customizable search with text highlighting. You can use highlightTestSetter/Getter for highlight complaint objects ot customize text passed from different places.

Props Guide

| Property | Type | Description | |---|---|---| | LabelComponent | component | component for rendering label | | OptionComponent | component | component for rendering option | | getOptionProps | function | pass props to Option component | | getLabelProps | function | pass props to Label component | | closeOnChange | boolean | close options menu after item click | | placeholder | string | default placeholder text | | value | array | selected values | | onChange | function | change handler function | | onSearch | function | filter options by search input text | | highlightTextGetter | function | get the highlight text from compound option object | | highlightTextSetter | function | set the output compound object to the option label after search filter | | search | boolean | enable or disable search | | searchText | string | current search text value | | multiple | boolean | enable or disable multiple select | | searchEmptyPlaceholder | string | no items found text | | searchPlaceholder | string | search placeholder text | | className | classnames | class name, may be string or object, classnames inside | | clearText | string | clear items button popup text | | open | boolean | options menu statement flag | | customLabelsRender | function | custom render for selected items |

Development

Start the dev server

$ npm run serve
$ npm run example

Defaults to port 4444, check the localhost:4444 to view the library usage

Example

import React, { PropTypes } from "react";
import { noop } from "lodash";
import SelectItem from "react-select-item";

export default class MultiSelectFilter extends React.Component {

  static propTypes = {
    placeholder: PropTypes.string,
    isLoading: PropTypes.bool,
    label: PropTypes.string,
    value: PropTypes.array,
    options: [],
    onChange: PropTypes.fn,
    className: PropTypes.string,
    wrapperClassName: PropTypes.string
  };

  static defaultProps = {
    placeholder: "",
    isLoading: false,
    label: "",
    value: [],
    options: [],
    onChange: noop,
    className: ""
  };

  /**
   * Component constructor
   * The component is depended from Bootstrap 3.x (styles only)
   * @param props
   */
  constructor(props) {
    super(props);
    this.state = {
      values: this.props.value
    };
  }

  handleMultiChange = (value) => {
    this.setState({ values: value });
    this.props.onChange(value);
  };

  render() {
    return (
      <div className={this.props.wrapperClassName}>
        <div className="form-group">
          <label>{this.props.label}</label>
          <SelectItem label={this.props.label}
                     onChange={this.handleMultiChange}
                     value={this.state.values}
                     closeText={false}
                     className="form-control"
                     multiple={true}>
            { this.props.options.map((item, index) => (
                <option key={index} value={item}>{item.name}</option>
              )
            )}
          </SelectItem>
        </div>
      </div>
    );
  }
}