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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With