@danacita/react-select-virtualized

react-select-virtualized

react-select with virtualization.

Install

npm install --save @danacita/react-select-virtualized

Peer Dependencies

{
  "react": "^16.8.6",
  "react-dom": "^16.8.6",
  "react-virtualized": "^9.21.1",
  "classnames": "^2.2.6",
  "react-select": "^2.4.4"
}

Usage without group

const options = [
  {
    value: 1,
    label: `Label`,
  },
  ...
];

import React, { Component } from 'react';

import Select from 'react-select-virtualized';

const Example extends Component {
  render() {
    return <Select options={options}/>;
  }
}

const Example2 = () => <Select options={options}/>

const Example3 = () => <Select options={options} {..ANY_REACT_SELECT_V2_PROP}/>

Usage with group

const options = [
  {
    value: 1,
    label: `Label`,
  },
  ...
];

const opsGroup = [
  { label: `Group Name Header`, options },
  ...
]

import React, { Component } from 'react';

import Select from 'react-select-virtualized';

const Example extends Component {
  render() {
    return <Select options={options} grouped/>;
  }
}

const Example2 = () => <Select options={options} grouped/>

const Example3 = () => <Select options={options} {..ANY_REACT_SELECT_V2_PROP} grouped/>

Usage with Async Loading, also with group

import React, { Component } from 'react';

import { Async } from 'react-select-virtualized';

const loadOptions = (input, callback) => {...};

const Example extends Component {
  render() {
    return <Async defaultOptions={options} loadOptions={loadOptions}/>;
  }
}

const Example2 = () => <Async loadOptions={loadOptions}/>

const Example3 = () => <Async defaultOptions={options} {..ANY_REACT_ASYNC_SELECT_V2_PROP} loadOptions={loadOptions}/>

const Example4 = () => <Async defaultOptions={opsGroup} {..ANY_REACT_ASYNC_SELECT_V2_PROP} loadOptions={loadOptions} grouped/>

License

Copyright (c) 2019 Dana Cita Licensed under the MIT license.