Call renderOption with relevant option props

[nfiniteset]

As a client dev when I custom-render an option I can have relevant state and props available so I can render interactive, standards-compliant items in my Dropdown.

---

When item is a string

<Dropdown
  renderOption={(item, itemProps) => (
    <div {...itemProps}>{item}</div>
  )}
/>

When item is an object

<Dropdown
  renderOption={(item, itemProps) => (
    <div {...itemProps}>{item.label}</div>
  )}
/>

Applying a class when item is selected

<Dropdown
  renderOption={(item, itemProps) => (
    <div
      className={cn({ 'my-item--selected': itemProps.selected })}
      {...itemProps}
    >{item.label}</div>
  )}
/>

itemProps is an object with the following properties

[nfiniteset]

@morrisallison is it fair to say that the itemProps object passed to our option renderer should be whatever downshift returns from getItemProps such as on dropdown/src/presenters/renderOptions.js:38? Anything we should exclude from what downshift returns?

How might we support rendering when an option is highlighted and selected?

[morrisallison]

@nfiniteset There are positives and negatives for both.

Providing props directly from getItemProps allows for changes from Downshift to automatically be reflected through the API. However, this exposes some of the private functionality of our component, and yields control over our API to a dependency. With the way our versioning is set up, new features from Downshift would automatically be exposed to users.

Filtering props from getItemProps before providing them, allows us to retain control over the API and expose only the necessary functionality. However there's additional cost with needing to update said filtering to match what Downshift provides. In this case, I don't foresee that cost being very expensive.