import {noop, pick} from 'lodash';
import createReactContext from 'create-react-context';
import React from 'react';

const TypeaheadContext = createReactContext({
  activeIndex: -1,
  hintText: '',
  initialItem: null,
  isOnlyResult: false,
  onActiveItemChange: noop,
  onAdd: noop,
  onInitialItemChange: noop,
  onMenuItemClick: noop,
  selectHintOnEnter: false,
});

export const withContext = (Component, values) => (props) => (
  <TypeaheadContext.Consumer>
    {(context) => <Component {...props} {...pick(context, values)} />}
  </TypeaheadContext.Consumer>
);

export default TypeaheadContext;

@@ -420,21 +420,222 @@
  =%3E 
-(props) =%3E (%0A
+%7B%0A  // Note: Use a class instead of function component to support refs.%0A  /* eslint-disable-next-line react/prefer-stateless-function */%0A  return class extends React.Component %7B%0A    render() %7B%0A      return (%0A      
   %3CT
@@ -660,16 +660,22 @@
 nsumer%3E%0A
+      
     %7B(co
@@ -683,16 +683,30 @@
 text) =%3E
+ (%0A           
  %3CCompon
@@ -713,16 +713,21 @@
 ent %7B...
+this.
 props%7D %7B
@@ -758,10 +758,28 @@
 %7D /%3E
-%7D
 %0A
+          )%7D%0A      
   %3C/
@@ -805,17 +805,37 @@
 nsumer%3E%0A
-)
+      );%0A    %7D%0A  %7D;%0A%7D
 ;%0A%0Aexpor

Use class instead of stateless component in `withContext`