Allow passing a custom base select component. This behaviour can be helpful if you have your own custom wrapper for the react-select component.

Author: macku

.gitignore

@@ -3,3 +3,7 @@ node_modules
 *.log
 lib
 es
+.idea/
+
+# Repository is using Yarn
+package-lock.json

src/__tests__/async-paginate-test.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { shallow, mount } from 'enzyme';
 import { SelectBase } from 'react-select';
 
@@ -717,3 +717,23 @@ describe('loadOptions', () => {
     expect(reduceOptions.mock.calls[0][2]).toBe(additionalNext);
   });
 });
+
+test('should allow to puss custom Select component', () => {
+  // eslint-disable-next-line react/prefer-stateless-function
+  class MyCustomSelectWrapper extends Component {
+    render() {
+      return <SelectBase {...this.props} />;
+    }
+  }
+
+  const wrapper = mount(
+    <AsyncPaginate
+      SelectComponent={MyCustomSelectWrapper}
+      loadOptions={() => {
+      }}
+    />,
+  );
+
+  expect(wrapper.find(MyCustomSelectWrapper))
+    .toBeTruthy();
+});

src/async-paginate.jsx

@@ -16,6 +16,13 @@ const sleep = (ms) => new Promise((resolve) => {
   }, ms);
 });
 
+// Supports forwardRef https://github.com/facebook/prop-types/issues/200
+const ComponentPropType = PropTypes.oneOfType([
+  PropTypes.func,
+  PropTypes.string,
+  PropTypes.shape({ render: PropTypes.func.isRequired }),
+]);
+
 class AsyncPaginate extends Component {
   static propTypes = {
     loadOptions: PropTypes.func.isRequired,
@@ -27,6 +34,7 @@ class AsyncPaginate extends Component {
     additional: PropTypes.any,
     reduceOptions: PropTypes.func,
 
+    SelectComponent: ComponentPropType,
     components: PropTypes.objectOf(PropTypes.func),
 
     // eslint-disable-next-line react/forbid-prop-types
@@ -43,6 +51,7 @@ class AsyncPaginate extends Component {
     additional: null,
     reduceOptions: defaultReduceOptions,
 
+    SelectComponent: SelectBase,
     components: {},
 
     cacheUniq: null,
@@ -245,6 +254,8 @@ class AsyncPaginate extends Component {
     const {
       selectRef,
       components,
+      SelectComponent,
+      ...props
     } = this.props;
 
     const {
@@ -256,8 +267,8 @@ class AsyncPaginate extends Component {
     const currentOptions = optionsCache[search] || this.getInitialCache();
 
     return (
-      <SelectBase
-        {...this.props}
+      <SelectComponent
+        {...props}
         inputValue={search}
         menuIsOpen={menuIsOpen}
         onMenuClose={this.onMenuClose}