React-select: Feature request: Allow passing props to custom components

[mikkelwf]

My usecase is as such:

I want to add a button/content below the MenuList.
This is done by making a custom menu:

const Menu = ({actionRenderer, ...props}) => {
  return components.Menu && (
    <Fragment>
      <components.Menu {...props}>
        {props.children}
      </components.Menu>
      {actionRenderer && actionRenderer()}
    </Fragment>
  )
}

But as far as i've read in the documentation, it's impossible to pass your own props through the Select to you own components..?

May a whitelist solution like this could work..?

<Select
   ...
   actionRenderer={()=> ...}
   passProps={['actionRenderer']}

[mike391]

This would be very useful. +1

[TotallWAR]

I have the same problem.

[TotallWAR]

@mikkelwf i have found solution. You can pass your custom props to Select. And then you can take it in your custom component from props.selectProps.yourCustomProp

[maxmarchuk]

@TotallWAR This works for most components. However, not all components have access to selectProps. e.g. Input doesn't receive them

[mikkelwf]

selectProps is working fine.. So i'm closing this..

[maxmarchuk]

@mikkelwf The original issue was resolved, but I'm still curious why the Input component doesn't receive selectProps. Should I create a new issue?

[Vnam92]

@maxmarchuk i have the same problem, please open new issue) Input doesn't have any props from outer component