expose children in AsyncCreatable.js

src/AsyncCreatable.js

@@ -1,17 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Select from './Select';
 import Async from './Async';
 import Creatable from './Creatable';
 
-function reduce(obj, props = {}){
-  return Object.keys(obj)
-  .reduce((props, key) => {
-    const value = obj[key];
-    if (value !== undefined) props[key] = value;
-    return props;
-  }, props);
-}
-
 class AsyncCreatableSelect extends React.Component {
 
 	focus () {
@@ -21,27 +13,39 @@ class AsyncCreatableSelect extends React.Component {
 	render () {
 		return (
 			<Async {...this.props}>
-				{(asyncProps) => (
-					<Creatable {...this.props}>
-						{(creatableProps) => (
-							<Select
-								{...reduce(asyncProps, reduce(creatableProps, {}))}
-								onInputChange={(input) => {
-									creatableProps.onInputChange(input);
-									return asyncProps.onInputChange(input);
-								}}
-								ref={(ref) => {
-									this.select = ref;
-									creatableProps.ref(ref);
-									asyncProps.ref(ref);
-								}}
-							/>
-						)}
-					</Creatable>
-				)}
+				{({ ref, ...asyncProps }) => {
+					const asyncRef = ref;
+					return (<Creatable {...asyncProps} >
+						{({ ref, ...creatableProps }) => {
+							const creatableRef = ref;
+							return this.props.children({
+								...creatableProps,
+								ref: (select) => {
+									creatableRef(select);
+									asyncRef(select);
+									this.select = select;
+								}
+							});
+						}}
+					</Creatable>);
+				}}
 			</Async>
 		);
 	}
 };
 
+function defaultChildren (props) {
+	return (
+		<Select {...props} />
+	);
+};
+
+AsyncCreatableSelect.PropTypes = {
+	children: PropTypes.func.isRequired, // Child function responsible for creating the inner Select component; (props: Object): PropTypes.element
+};
+
+AsyncCreatableSelect.defaultProps = {
+	children: defaultChildren,
+};
+
 export default AsyncCreatableSelect;

src/Creatable.js

@@ -116,7 +116,7 @@ class CreatableSelect extends React.Component {
 		this.inputValue = input;
 
 		if (onInputChange) {
-			this.inputValue =  onInputChange(input);
+			this.inputValue = onInputChange(input);
 		}
 
 		return this.inputValue;