How can I add custom props to an Option using React Select?

Question

My goal is to add a tooltip when the user expands the menu and hovers over the items listed. To do this, I need to add data-tip and data-for to the menu items.

The options I'm passing to React Select looks like this:

  [
    { value: 1, label: 'Onw' },
    { value: 2, label: 'Two' },]

I'd like to just add the prop info there but I don't think there's a way. Do I need to customize the rendering of each option? Any tips on how to do this would be appreciated. Thanks.

Answer 1

You can simply wrap your custom Option inside a function then assign custom props for it

components={{ Option: (optionProps) => <Option {...optionProps} onEditItem={onEditItem}
    onDeleteItem={onDeleteItem} />  }}

Answer 2

react-select seems to be only accepting value and label as props (and possibly other HTML attributes that an <option> accepts), so I did this with the help of a function:

const options = [
   { value: "a", label: "A", tooltip: "yellow" },
   { value: "b", label: "B", tooltip: "orange" },
   { value: "c", label: "C", tooltip: "blue"   },
];

function getTooltip(value) {
   return options.find(x => x.value === value).tooltip;
}

/* A custom option component as an example */
const Option = (props) => {
   return (
      <components.Option {...props}>
         <div data-tip={getTooltip(props.value)}>
             {props.label}
         </div>
      </components.Option>
   );
};

/* Pass the custom component to <Select> */
return (
   <Select options={options} components={{ Option }} />
)