CODEWITHSUNDEEP
reactjsreact-select
Melissa
Melissa

Reputation: 952

react-select - Show different text/label for drop-down and Control?

In my react-select drop-down, the labels are hundreds of characters long. In the Control chips, I would like to show a shorter version of what's in the drop-down. Is this possible?

Edit: I want to set the text of the chip, not pixel width.

Upvotes: 8

Views: 16824

Answers (3)

Aks
Aks

Reputation: 8301

For Multi Value with typescript & react-select 5.7.x:

import Select, { components, MultiValueGenericProps } from "react-select";

type OptionType = {
  id: string;
  name: string;
  description: string;
};

const OptionsArraySample = [
  {
    name: "test",
    id: "1",
    description: "test description",
  },
  {
    name: "test 2",
    id: "2",
    description: "test description 2",
  },
];

const MultiValueLabel = (props: MultiValueGenericProps<OptionType>) => {
  return <components.MultiValueLabel {...props}>{props.data.name}</components.MultiValueLabel>;
};

// Main Component

export default function FormComponent() {
  return (
    <form>
      <Select
        name="sampleSelect"
        className="react-select-container"
        classNamePrefix="react-select"
        components={{ MultiValueLabel }}
        isClearable={false}
        isSearchable={true}
        getOptionValue={(option) => option.id}
        getOptionLabel={(option) => `${option.name} ${option.description}`}
        isMulti={true}
        options={OptionsArraySample}
      />
    </form>
  );
}

Upvotes: 0

Rajaram Nayak
Rajaram Nayak

Reputation: 153

In React-select V1 , If you ever get into a situation where Selected Value and the Options shown to the User in the drop down have to be different. There is a Props called valueRenderer.

valueRenderer : function which returns a custom way to render the value selected. its signature is function (option) { return option.value //add any logic to derive the displayed text to user here }

https://github.com/JedWatson/react-select/tree/v1.x

Upvotes: 0

Laura
Laura

Reputation: 8630

SOLUTION 1

You can custom the style of the control chips when using the multiple value Select with the props styles like the following example:

const customStyles = {

    multiValue: (base, state) => ({
      ...base,
     // set all chips to a maximum of 100 pixels
      maxWidth: "100px"
    })
  };

Here a live example of shorter versions of long label. I put special (and ugly) background so you can see where each container starts and ends.

SOLUTION 2

Following the comment request this is an alternative solution to cut the selected option. You can overwrite the component MultiValue with the prop components. Inside this component you will have access to the option label and apply substring function to truncate the label as short as you can.

const MultiValue = props => {
// truncate the string to 3 characters
   const content = props.children.substring(0, 3);
   return <components.MultiValue {...props}>{content}...</components.MultiValue>;
};

Here a live example of this alternative option.

SOLUTION 3

In the same idea as the solution 2 if you know in advance your option labels and the crop you want to display you can set an extra props in your options array like this: 

const options = [
  {
    label:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi augue sem, bibendum quis mollis amet.",
    // you can name this new prop has you want
    chipLabel: "Lorem ipsum",
    value: "1"
  },
  {
    label:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.",
    chipLabel: "Sed ut perspiciatis",
    value: "2"
  },
  {
    label:
      "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?",
    chipLabel: "Ut enim",
    value: "3"
  }
];

And then overwrite the component with the following code:

const MultiValue = props => (
  <components.MultiValue {...props}>
    {props.data.chipLabel}
  </components.MultiValue>
);

<Select options={options} components={{ MultiValue }} />

Here a live example.

SOLUTION FOR SINGLE VALUE

If you want to display a different value than in options for SingleValue select I recommend to use the solution 3 and change the component like this:

const SingleValue = props => (
  <components.SingleValue {...props}>
    {props.data.chipLabel}
  </components.SingleValue>
);

<Select options={options} components={{ SingleValue }} />

Here a live example.

Upvotes: 23

Related Questions