react-select: Is there a way to remove the button on the right that expand the list, at least in async mode?
We can remove the dropdown indicator by including DropdownIndicator: () => null
in components property.
Update:As @shlgug and @nickornotto suggested remove separator by including IndicatorSeparator:() => null
<Select components={{ DropdownIndicator:() => null, IndicatorSeparator:() => null }} />
To expand on rajesh kumar's answer, you can remove the dropdown indicator and the indicator separator (the horizontal line between the selection text and the dropdown arrow) using the following:
<Select components={{ DropdownIndicator:() => null, IndicatorSeparator:() => null }}/>
EDIT: This is for an older version.
Styling react-select is doable but you need to jump through a few hoops.
You have some auto-generated elements you can target to style - https://react-select.com/styles#style-object
In order to find what the style-key is for the element you want to target is look at this - https://github.com/JedWatson/react-select/issues/3135#issuecomment-432557568
^ You need to add a className
and classNamePrefix
to the Component to see what it actually is. Their docs could do with some work but I see a big backlog of issues and PRs on the repo so I think the odds are slim that that will happen soon.
Then you can style that key as described - https://react-select.com/styles#provided-styles-and-state