{"size": 928, "ext": "js", "max_stars_repo_path": "packages/cf-component-select/example/async/component.js", "max_stars_repo_name": "jsoref/cf-ui", "max_stars_repo_stars_event_min_datetime": "2016-06-09T14:14:55.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-24T14:31:29.000Z", "max_issues_repo_path": "packages/cf-component-select/example/async/component.js", "max_issues_repo_name": "jsoref/cf-ui", "max_issues_repo_issues_event_min_datetime": "2016-06-10T09:49:52.000Z", "max_issues_repo_issues_event_max_datetime": "2020-11-13T15:00:15.000Z", "max_forks_repo_path": "packages/cf-component-select/example/async/component.js", "max_forks_repo_name": "jsoref/cf-ui", "max_forks_repo_forks_event_min_datetime": "2016-06-09T15:57:39.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-01T11:07:07.000Z"}
{"max_stars_count": 1443, "max_issues_count": 268, "max_forks_count": 126, "avg_line_length": 21.0909090909, "max_line_length": 60, "alphanum_fraction": 0.5301724138}
import React from 'react';
import { Select } from 'cf-component-select';

class SelectComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 'one' };
  }

  handleChange(value) {
    this.setState({ value });
  }

  getOptions(input, callback) {
    setTimeout(() => {
      return callback(null, {
        options: [
          { value: 'one', label: 'One' },
          { value: 'two', label: 'Two' },
          { value: 'three', label: 'Three' }
        ].filter(option => option.value.indexOf(input) >= 0)
      });
    }, 500);
  }

  render() {
    return (
      <div>
        <Select
          searchable
          multi
          async
          label="Async Select"
          value={this.state.value}
          loadOptions={this.getOptions.bind(this)}
          onChange={this.handleChange.bind(this)}
        />
      </div>
    );
  }
}

export default SelectComponent;
