Prop Getters?

component-getters.jsx

import React from 'react';
import Downshift from 'downshift';

class Foo extends React.Component {
  render() {
    return <Downshift onChange={this.onChange}>
      {(controls) => {
        const {isOpen, inputValue, selectedItem, ...funcs} = controls;

        return <div>
          <label {...funcs.getLabelProps()}>Type things</label>
          <input {...funcs.getInputProps()} />
        </div>
      }}
    </Downshift>
  }
}

component-opts.jsx

import React from 'react';
import Downshift from 'downshift';

class Foo extends React.Component {
  render() {
    return <Downshift onChange={this.onChange}>
      {(controls) => {
        const {isOpen, inputValue, selectedItem, labelProps, inputProps,...funcs} = controls;

        return <div>
          <label {...labelProps, anOverride: true}>Type things</label>
          <input {...inputProps} />
        </div>
      }}
    </Downshift>
  }
}

I'm not sure I know the value of the getLabelProps(yourProps) vs {...inputProps, ...yourProps}. Does it letcha do other cool stuff I'm not aware of?

Does it letcha do other cool stuff I'm not aware of?

Yes, with your example:

<input {...inputProps} onChange={this.handleChange} />

That just broke downshift... Because you overwrote inputProps.onChange.

So instead you would have to compose them together yourself so you run both your onChange handler and downshift's, and watch out for updates that remove onChange internally so you're not calling it...

With downshift, you do this instead:

<input {...getInputProps({onChange: this.handleChange})} />

And downshift will compose it together for you 😄