How to reduce the size of React Select in v2

react-select
Darren Oster picture Darren Oster · Apr 16, 2018 · Viewed 22.1k times · Source

The new v2 react-select control is great, but by default is too large. Is there a (preferably) simple way to reduce the height to the same as a standard select control (using Bootstrap v3)?

Answer

ryanrain picture ryanrain · May 21, 2018

Try passing in a value for the maxMenuHeight prop:

<Select
  maxMenuHeight={190}
/>

see documentation

Related questions

How to set a default value in react-select

I have an issue using react-select. I use redux form and I've made my react-select component compatible with redux form. Here is the code: const MySelect = props => ( <Select {...props} value={props.input.value} onChange={value => props.input.…

Read More
How to style react-select options

What's the best way to style a react-select component's (https://github.com/JedWatson/react-select) options? I can target the select itself just fine, with something like: ... import Select from 'react-select' ... const styles = { fontSize: 14, color: 'blue', } <Select options={[1,2,3,4]} placeholder={'Select …

Read More
How to programmatically clear/reset React-Select?

ReactSelect V2 and V3 seems to have several props like clearValue, resetValue and setValue. Whatever I'm trying, I'm not able to clear the selections programmatically. resetValue seems not to be accessible from the outside. selectRef.setValue([], 'clear') // or selectRef.clearValue() …

Read More