Custom Placeholder Component React-Select

Question

How can I set a custom placeholder element?

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

Thanks.

Answer 1

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>} />

Answer 2

<Select placeholder={Type to search} />

works