Custom Placeholder Component React-Select

react-select
bernatfortet picture bernatfortet · Nov 2, 2017 · Viewed 11k times · Source

How can I set a custom placeholder element?

I'd like to add a search icon when the field is empty

Thanks.

Answer

bernatfortet picture bernatfortet · Nov 2, 2017

TLDR; I just figured out that I can just simply pass a component

I guess I did not get that a node could be a component.

The documentation indicates:

placeholder - type: string|node

The following line comes from the source. As you see, it allows a component to be passed. 

return !this.state.inputValue ? <div className="Select-placeholder">{this.props.placeholder}</div> : null;

So I can use

<Select placeholder={<div>Type to search</div>} />

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