RPS#next Better api for https://github.com/selvagsz/react-power-select

rps-api.jsx

// Basic - Plain Array
<PowerSelect
  options={items}
  selected={this.state.selectedValue}
  onChange={this.handleChange}
>  
  {
    ({ results }) => (
      results.map(item => <Option option={item}>{item}</Option>)
    )
  }
</PowerSelect>


// Basic - Array of objects
<PowerSelect
  options={items}
  selected={this.state.selectedValue}
  selectedOptionComponent={({ option }) => option.name}
  searchFields={['name']}
  onChange={this.handleChange}
>  
  {
    ({ results }) => (
      results.map(item => <Option key={item.id} option={item} disabled={item.status === 'void'}>{item.name}</Option>)
    )
  }
</PowerSelect>

// OptGroup
<PowerSelect
  options={items}
  selected={this.state.selectedValue}
  selectedOptionComponent={({ option }) => option.name}
  searchFields={['name']}
  onChange={this.handleChange}
>  
  {
    ({ results }) => (
      results.map(item => (
        <OptGroup key={item.groupId} disabled={item.continent === 'Asia'}>
          <div>{item.name}</div>
          {
            item.options.map(option => <Option key={option.id} option={option}>{option.name}</Option>)
          }
        </OptGroup>
      ))
    )
  }
</PowerSelect>


// All Options
<PowerSelect
  options={items}
  onChange={this.handleChange}
  selectedOptionComponent={({ option }) => option.name}
  searchFields={['name']}
  triggerLHSComponent={}
  triggerRHSComponent={}
  beforeOptionsComponent={}
  afterOptionsComponent={}
>
  {
    ({ results }) => (
      results.map(item => <Option option={item} disabled={item.status === 'paid'}>{item.name}</Option>)
    )
  }
</PowerSelect>