Skip to content

BusinessDuck/react-select-item

Repository files navigation

React Select Item

Build Status npm version Donate License

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

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>
        );
    }
}
  1. 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",
            },
        ];
  1. 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 { Select as 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: ""
  };

  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 placeholder={this.props.label}
                     onChange={this.handleMultiChange}
                     value={this.state.values}
                     closeText={false}
                     className="form-control"
                     multiple={true}
                     options={this.props.options}
          />
        </div>
      </div>
    );
  }
}