Provide an easy way to extend react-select to make it work with other data structures

Immutable data structures become more and more popular in React community. But one of the biggest issues of using them is that there is no straightforward way to integrate them with third-party components like react-select. That’s why we end up with converting immutable data to plain js and back. I suggest to provide several facade-methods for array manipulation, that anyone can easily override to provide support for any data type he wants. These methods are _isArray, _getArrayLength, _getArrayItem and so on.

So originally we will have something like this

{
  _isArray(array) {
    return Array.isArray(array)
  },
  _getArrayLength(array) {
    return array.length;
  },
  _getArrayItem(array, index) {
    return array[index]
  }
}

but if we need, for example Immutable.js support, then we can extend react-select in the following way

import Select from 'react-select';
import {List} from 'immutable';

class ImmutableReactSelect extend Select {
  _isArray(array) {
    return Immutable.List.isList(array) || Array.isArray(array)
  },
  _getArrayLength(array) {
    return  Immutable.List.isList(array) ? array.size : array.length;
  },
  _getArrayItem(array, index) {
    return Immutable.List.isList(array) ? array.get(index) : array[index];
  }
}

and now we can use

import React from 'react';
import {List, Record} from 'immutable';
import ImmutableReactSelect from './ImmutableReactSelect';

const Option = Record({ value: '', label: '' });
const options = List([
   new Option({ value: 'one', label: 'One' }),
   new Option({ value: 'two', label: 'Two' }),
   new Option({ value: 'three', label: 'Three' })
]);

export default class App extends React.Component {
  render() {
    return (
      <ImmutableReactSelect
        name="form-field-name"
        value='one'
        options={options}
      />
    );
  }
}

I have a PR for these changes. If you guys are interested, I can submit it.

[stipsan]

@kylemh unfortunately no, I had to resort to toJS. To make it less painful I followed the Higher Order Pattern described in the redux docs.

[Webkadabra]

I would vote for that, immutable is awesome 👍