I see that you need MultiValue - that wasn't clear to me from the docs but was obvious when I implemented it for SingleValue.

Please close, sorry for the noise.

No worries @jechlin, glad you got to the bottom of it

I came exactly into the same error by mistake.
I see that the selected option is coming as data in the props, but it's not documented.

What do you think about reducing the burden in the docs?
https://deploy-preview-2289--react-select.netlify.com/props#components
Perhaps removing some components. For example, having MultiValue I'm not sure if it is necessary to have also MultiValueContainer, MultiValueLabel, and MultiValueRemove.
Perhaps collapsing (hiding) these less important components on the docs.
Perhaps grouping all common props into a collapsable element that is collapsed (hidden) by default.

And I it would be nice to have some description for what each component represents. (A screenshot would be fantastic).

Again this are just a few suggestions, take whatever you feel to.
Great library! Much thanks for your hard work

hello,
anyone know an example how tu add the icon to the option?
thanks

Just override the Option component with yours and you will have full control on what you want to render.
See Option on https://deploy-preview-2289--react-select.netlify.com/components
Perhaps something like

import { components } from 'react-select';
const { Option } = components;
const IconOption = (props) => (
    <Option {...props}>
      <SomeIcon />
      {props.data.label}
    </Option>
);

And then you apply it to your Select component

import Select from 'react-select';
[...]
  <Select
    [...]
    components={{ Option: IconOption }}
  />

@canda showed how to implement an icon with your option labels. Works perfect with v2. Anyone know how to accomplish similar with v1.2.1? I'm stuck in the past. ☕

Just override the Option component with yours and you will have full control on what you want to render.
See Option on https://deploy-preview-2289--react-select.netlify.com/components
Perhaps something like

import { components } from 'react-select';
const { Option } = components;
const IconOption = (props) => (
    <Option {...props}>
      <SomeIcon />
      {props.data.label}
    </Option>
);

And then you apply it to your Select component

import Select from 'react-select';
[...]
  <Select
    [...]
    components={{ Option: IconOption }}
  />

Did the same solutions and working fine. but for the selected option its not showing the icons. It should work like the example 'Custom Placeholder' on this page https://jedwatson.github.io/react-select/
I am using react-select 2.0

@AbhaysinghBhosale You might have to also overwrite the SingleValue component to achieve the same effect as with the options.

@TroyWolf For v1.x check out the example Custom Placeholder, Option, Value, and Arrow Components on the v1 page https://v1.react-select.com. There is also a working link to the source code of the example.

@canda You are legend sir!

@AbhaysinghBhosale You might have to also overwrite the SingleValue component to achieve the same effect as with the options.

@TroyWolf For v1.x check out the example Custom Placeholder, Option, Value, and Arrow Components on the v1 page https://v1.react-select.com. There is also a working link to the source code of the example.

I am using version 2.0 and its not working for the selected option

@Rall3n Thanks for pointing its worked after using Single Value componentas follows
const { Option, SingleValue } = components; const IconOption = (props) => ( <Option {...props}> <img className='img-responsive img-flex img-filter' src={require(../../Images/${props.data.Type}.png)} alt="" /> {" "+props.data.label} </Option> ); const ValueOption = (props) => ( <SingleValue {...props}> <img className='img-responsive img-flex img-filter' src={require(../../Images/${props.data.Type}.png)} alt="" /> {" "+props.data.label} </SingleValue> );

and passing to select as
<Select components={{ Option: IconOption, SingleValue : ValueOption }} classNamePrefix="filter" className={this.state.selectClass} value={selectedOption} defaultValue={selectedOption} label="Single select" options={options} onChange={this.setfunciton} />

Just override the Option component with yours and you will have full control on what you want to render.
See Option on https://deploy-preview-2289--react-select.netlify.com/components
Perhaps something like

import { components } from 'react-select';
const { Option } = components;
const IconOption = (props) => (
    <Option {...props}>
      <SomeIcon />
      {props.data.label}
    </Option>
);

And then you apply it to your Select component

import Select from 'react-select';
[...]
  <Select
    [...]
    components={{ Option: IconOption }}
  />

If your Icon is image, how should I be able to do :

const IconOption = (props) => (

''

);

The fact that I use require(...) gives me a bug cause react can't reach module props.data.image as path, even if the path exists and work if I type it as string. Any solution?

@Rall3n Thanks for pointing its worked after using Single Value componentas follows
const { Option, SingleValue } = components; const IconOption = (props) => ( <Option {...props}> <img className='img-responsive img-flex img-filter' src={require(../../Images/${props.data.Type}.png)} alt="" /> {" "+props.data.label} </Option> ); const ValueOption = (props) => ( <SingleValue {...props}> <img className='img-responsive img-flex img-filter' src={require(../../Images/${props.data.Type}.png)} alt="" /> {" "+props.data.label} </SingleValue> );

and passing to select as
<Select components={{ Option: IconOption, SingleValue : ValueOption }} classNamePrefix="filter" className={this.state.selectClass} value={selectedOption} defaultValue={selectedOption} label="Single select" options={options} onChange={this.setfunciton} />

can you plz share your version and code sample ... i am also using 2.0 but unable to achieve the result

@Rall3n Thanks for pointing its worked after using Single Value componentas follows
const { Option, SingleValue } = components; const IconOption = (props) => ( <Option {...props}> <img className='img-responsive img-flex img-filter' src={require(../../Images/${props.data.Type}.png)} alt="" /> {" "+props.data.label} </Option> ); const ValueOption = (props) => ( <SingleValue {...props}> <img className='img-responsive img-flex img-filter' src={require(../../Images/${props.data.Type}.png)} alt="" /> {" "+props.data.label} </SingleValue> );
and passing to select as
<Select components={{ Option: IconOption, SingleValue : ValueOption }} classNamePrefix="filter" className={this.state.selectClass} value={selectedOption} defaultValue={selectedOption} label="Single select" options={options} onChange={this.setfunciton} />

can you plz share your version and code sample ... i am also using 2.0 but unable to achieve the result

@tapas100 - I don't know if you're still looking for this code sample or not... please see below full example... I used the example from @AbhaysinghBhosale along with insight provided by @Rall3n and @canda and came up with this which is basically the same thing that @AbhaysinghBhosale has provided:

import React from "react";
import Select, {components} from 'react-select';
import {avatarOptions} from '../helpers/ddOptions';

class MyApp extends React.Component {

    // Change event handler for React-Select component.
    handleOnChangeReactSelect = (selectValue) => {
        // Update the current stopwatch.
        // Take a copy of the current stopwatch.
        const updatedStopwatch = {
            ...this.props.stopwatch,
            "avatar": selectValue
        };
        
        this.props.updateStopwatch(this.props.stopwatchindex, updatedStopwatch);
    }

    render() {

        // React Select mods.
        const { Option, SingleValue } = components;
        const IconOption = (props) => (
            <Option {...props}>
                <img className="maybeUseClassName" src={props.data.label} style={{width:30}} alt="" />
            </Option>
        );
        const ValueOption = (props) => ( 
            <SingleValue {...props}> 
                <img className="maybeUseClassName" src={props.data.label} style={{width:30}} alt="" /> 
            </SingleValue> 
        );

        return (
                <div className="name-container">
                    <Select 
                        name="avatar"
                        value={avatar}
                        onChange={this.handleOnChangeReactSelect}
                        options={avatarOptions()}
                        components={{ Option: IconOption, SingleValue: ValueOption }}
                    />
                </div>
        )
    }
}

export default MyApp;

Thx @canda, @Rall3n and @AbhaysinghBhosale!