React-select: Overriding dropdown markup

Created on 10 Jan 2017 · 3Comments · Source: JedWatson/react-select

Hello everyone!

First of all, thank you for the great plugin! 👍

I am looking for a way to override the markup without modifying the entire menu (I just need a button at the very bottom of the dropdown). I am aware of the 'menuRenderer' prop, however I am under the impression it overrides the whole thing and I need to reimplement the logic behind it.

Am I wrong or is there a way to use it without rewriting the options etc. by myself?

Maybe I'm missing something in the doc, in that case, I apologize.

Thank you in advance!

Source

MindRave

Most helpful comment

I wanted to render a particular option completely different so I made something like this:

menuRenderer={(params) => (
  <div className='Select-menu-outer'>
    <div className='Select-menu' role='listbox'>
      {params.options.map(option => {
        if (option.value === 'foobar') {
          return <CustomComponent />
        }
        return <div key={option.value}
          onClick={() => params.selectValue(option)}
          onMouseOver={() => params.focusOption(option)}
          className={`Select-option ${params.focusedOption && params.focusedOption.value === option.value ? 'is-focused' : ''}`}
          role='option'>{option.label}</div>
      })}
    </div>
  </div>
)}

gimenete on 13 Mar 2017

👍7

All 3 comments

I also need exactly this @MindRave

gitsubham on 18 Jan 2017

👍1

I wanted to render a particular option completely different so I made something like this:

menuRenderer={(params) => (
  <div className='Select-menu-outer'>
    <div className='Select-menu' role='listbox'>
      {params.options.map(option => {
        if (option.value === 'foobar') {
          return <CustomComponent />
        }
        return <div key={option.value}
          onClick={() => params.selectValue(option)}
          onMouseOver={() => params.focusOption(option)}
          className={`Select-option ${params.focusedOption && params.focusedOption.value === option.value ? 'is-focused' : ''}`}
          role='option'>{option.label}</div>
      })}
    </div>
  </div>
)}

gimenete on 13 Mar 2017

👍7

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.