react-select to change background color when item is inserted, customize selected items appearance, remove selector at all, remove individual crosses and to show the constant text ?

[vtarelkin]

Good day, I want something like on the pic: the static text field, the changing of react-select's background only when item is selected: for example the default background is white and after the element is selected it becomes blue.
backgroundColor: state.isSelected ? '#E5F7FF' : '#FFFFFF', didn't work for me : the selectors with the defaultValue param and empty selectors are all coloured the same, it seems like isSelected is false.

Also I want show chosen items separated by coma without "x" near every item is it possible? Also there is no need of selector when item / items are selected. When I click on select component I want to see the dropdown item with highlight of selected items. When I need to remove single item I click on the highlight item in dropdown menu. When I need to remove all the items I click the common X in the react-select component.

Here is another pic of what I want to achieve: gray are items to choose, blue items to remove from the react-select. The dropdown list is constant and always shows all the positions
Is there a possibility to customize the form of the dropdown table? And border-shadow? I also want to limit the amount of dropdown items and add search box in top of them.

Thank you, I've asked many questions, hope you could help me

I am using v3 of react-select.

[alexristich]

Your request appears to be along the lines of "I was given these requirements; can I do all of this with react-select?" In the end, that's a question you can probably answer yourself if you spend some time reading through the pretty extensive documentation. Here's a link: https://react-select.com/home

If you find that something isn't currently possible, you can open a feature request stating what your use case is.

[vtarelkin]

Your request appears to be along the lines of "I was given these requirements; can I do all of this with react-select?" In the end, that's a question you can probably answer yourself if you spend some time reading through the pretty extensive documentation. Here's a link: https://react-select.com/home

If you find that something isn't currently possible, you can open a feature request stating what your use case is.

Your answer sounds like DIY, get off.

I really can't stand the documentation of react-select, I think it describes only simple outdated things, that not fully reflects the today's UI's demands.

Yes, I am simply gently asking for help, for customization. I suppose that the creator of that library is much more skilled and more proffesional than me and It may take only few minutes for him TO LEAD ME, TO SHOW ME THE WAY.

If I cannot do that with react-select then, probably, I shouldn't waste time searching for implementation. I dunno if this really possible or not. If not, please tell me. If possible - please give me a little help.

I think that instead of 6 little threads it is better to write all in one.

[vtarelkin]

@JedWatson could you please give me a hint?

[brijeshprasad89]

@vtarelkin-comprehend Even I am looking for similar stuff. I want to change background color of Select container, when some value is selected. On what component did you apply the above select-check i.e, state.isSelected ?

This is the follow-up question on stack-overflow that I have posted : https://stackoverflow.com/questions/60798714/how-to-change-color-and-border-of-react-select-when-value-is-present

[vtarelkin]

@brijeshprasad89 thank you. That's what I've got

Well, actually I found how to make a nice-looking select component

                 <Select
                     defaultValue={defaultValues}
                     closeMenuOnSelect={false}
                     isMulti
                     options={defaultValues}
                     components={{
                         IndicatorSeparator: () => null,
                         DropdownIndicator,
                         ClearIndicator,
                         MultiValueContainer: multiValueContainer
                     }}

and here we return all the values

     const multiValueContainer = (props) => {
         const label = props.data.label;
         const allSelected = props.selectProps.value;
         const index = allSelected.findIndex(selected => selected.label === label);
         const isLastSelected = index === allSelected.length - 1;
         const labelSuffix = isLastSelected ? ` (${allSelected.length})` : ", ";
         const val = `${label}${labelSuffix}`;
         return val;
     };

and the style

    const styles = {
        control: (base, state) => ({
            ...base,
            borderRadius: '16px',
            border: '1px solid #E5F7FF',
            boxShadow: 'none',
            boxSizing: 'border - box',
            wordWrap: "break-word",
            '&:hover':
                {
                    border: '1px solid #0679A8',
                }
        }),
        valueContainer: (provided, state) => ({
            ...provided,
            textOverflow: "ellipsis",
            maxWidth: "90%",
            whiteSpace: "nowrap",
            overflow: "hidden",
            display: "initial"
        })
    };