Custom multi-select value/"chip" renderer

After researching numerous autocomplete/selection components in the wild, I recently settled on react-select because it supports more of our requirements than any other. The effort of building it is much appreciated!

Even the custom renderer options are a great feature to have. However, it seems that there is a key component of react-select that can’t be generated with a custom render method: the multi select value “chips”. To be clear, I’m talking about the light-blue elements used to display each selected value:

I am aware that the valueRenderer prop can be used to render custom value components, including for multi select mode. While this is a great way to style the text or add an icon (as the examples demonstrate), it breaks down for many other use cases. If I want each chip to have a unique background color, this is all the further valueRenderer gets me:

There are other design treatments I could give the color patch, but nothing ideal. Ideally, I would be able to render something like this:

While aspects of this appearance can be applied with CSS, global styles will not allow customizing an entire chip independently from others. If I had a white option, I would need a light border and a grey delete button for that chip only, which is currently impossible. Further, there are limits on customizing the delete buttons since the only tool available is CSS. Background images and pseudo elements can only go so far.

Implementing material design chips (shown below) might be possible with CSS and valueRenderer, but it would certainly be easier if the developer had full control of the chip markup.

I’m no expert on the codebase of the project (yet). For those who are, is there anything blocking such a feature from being developed? As I see it, such a component would need:

• An onDelete prop that could be attached to a custom delete button.
• An option prop and/or a valueRenderer component that could be reused.
• An onValueClick function if one is provided to the Select component.

Such a component would put some responsibility on the developer to wire up existing functionality that react-select would otherwise give them for free, but would offer complete control. Usually that is the tradeoff 😃

This all seems fairly straightforward, I just may be missing something. If I can understand the details well enough, I may be able to find the time for a PR.

[tonisostrat]

Forget valueRenderer, you need to supply the valueComponent property. It’s a function that renders the whole item so you need to have it return HTML.

<Select
    valueComponent={conf => {
        //conf is an object with the following values you might find interesting
       const {
            id // unique id for the item
            children // an array where the first element ([0])
                     // is the output of the valueRenderer property
            disabled // state of this option
            value // the original option object
            onClick // the function supplied by onValueClick property
            onRemove // internal function to remove the selected item.
                     // If you want to call it you need to also give it the value field.
        } = conf;

        //so, you would do something like this
        return <div id={id}
                    // if you want to implement the handlers
                    // you *need* to bind them to onMouseDown
                    // because when you click on an item
                    // react-select opens the menu and kills the event propagation
                    onMouseDown={e => {
                        if(!disabled) {
                            onClick(e);
                            onRemove(value);
                        }
                        // for sanity's sake
                        e.stopPropagation();
                    }}>{children}</div>
    }},
    //other props
/>

[JedWatson]

Just wanted to note this here: I’ve implemented custom styling comprehensively in v2 (preview here https://deploy-preview-2289--react-select.netlify.com/styled)

I’m working to finalise the API at the moment so anyone who’s interested, please take a look at the alpha and open issues with feedback.