Replacing the clearIndicator X with custom text in React-Select

Question

I need to remove the clearIndicator's default X in the select component on MultiSelect and replace it with custom text. Is there a way to do this without losing the ability to remove the selected options (as happens with isClearable={false})?

Code:

export const MultiSelect = () => {
  const [selected, setSelected] = useState([]);

  const options = [
    { value: '1', label: 'Label1' },
    { value: '2', label: 'Label2' },
    { value: '3', label: 'Label3' },
  ];

const customStyles = {
    control: (prevStyle, { isFocused }) => ({
      ...prevStyle,
      backgroundColor: 'rgba(248, 251, 251, 1)',
      boxShadow: 'none',
      borderColor: isFocused ? 'black' : 'grey',
      ':hover': {
        borderColor: isFocused ? 'black' : 'grey',
      },
    }),
    clearIndicator: (prevStyle) => ({
      ...prevStyle,
      color: 'rgba(0, 0, 0, 0.4)',
      ':hover': {
        color: 'rgba(0, 0, 0, 0.4)',
      },
    }),
  };

return (
    <ReactSelect
      ref={reactSelectRef}
      placeholder={placeholder}
      instanceId={`multiselect-${id}`}
      styles={customStyles}
      isOptionSelected={isMulti && isOptionSelected}
      options={getOptions()}
      value={getValue()}
      onChange={isMulti ? onChangeHandler : onChange}
      hideSelectedOptions={false}
      closeMenuOnSelect={!isMulti}
      formatGroupLabel={formatGroupLabel}
      isMulti={isMulti}
    />
  );

Answer 1

React Select has an option of passing in your own custom Components Docs

Would look something like this

 <Select
    //You can pass in any component as the ClearIndidcator and do whatever customizations you want
    components={{ ClearIndicator: () => <div>Clear</div> }}
    {...props}
 />