fancy-react-select v1.0.4

This is a custom react select used in dottori.it applications.

Installation

npm install --save fancy-react-select or yarn add fancy-react-select

Usage

import React, {Component} from 'react';
import FancyReactSelect from "fancy-react-select";

class ShowCarsComponent extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      fancyCars: [
        {id: 1, name: "Tesla"}, 
        {id: 2, name: "Bugatti"},
        {id: 3, name: "Lamborghini"},
        {id: 4, name: "Ferrari"}
      ],
      currentCar: {id: 2, name: "Bugatti"},
      showSelectOptions: false
    }
    
    this.updateSelectedCar = this.updateSelectedCar.bind(this);
    this.dropDownSelectOptions = this.dropDownSelectOptions.bind(this);
  }
  
  updateSelectedCar(selectedCar) {
    this.setState({
      currentCar: selectedCar
      showSelectOptions: false
    });
  }
  
  dropDownSelectOptions(selectOptions) {
    if (selectOptions.length === 0) return false;
    
    this.setState({
      showSelectOptions: !this.state.showSelectOptions
    });
  }
  
  render() {
  	return (
        <FancyReactSelect 
            items={this.state.cars}
            showItemsOptions={showSelectOptions}
            currentItem={this.state.currentCar}
            onSelectItemHandler={this.updateSelectedCar}
            onClickDefaultItemHandler={this.dropDownSelectOptions}
        />
      )
  }
}


export default FancyReactSelect;

Props

Todo

• Add propType
• Write tests
• In-depth browser testing

Notes

This is a work in progress version. Don't use it in PROD!