Allow any React.ReactNode to be a label

[lcswillems]

Currently labels can only be strings. It is very restrictive. I would like them to be a React Node as React Select allows it.

[csandman]

I'll take a look at this! I'm not sure why this package would handle react nodes as labels differently than the original package. Do you have an example of what happens, like a CodeSandbox? I have templates in my Readme if you need. Also are you using TypeScript or vanilla JS?

[lcswillems]

After digging in, you are right that the limitation comes from the react-select. Maybe this issue should be closed and I should open a new one in react-select

[csandman]

Ah ok, that makes more sense. However, you aren't fully out of options. One way you could get the behavior you're looking for is by extending the Option component exported from this package to render custom elements you keep on your options object. This feature is explained in depth in the react-select docs

Here's a quick example I made demonstrating how to do it: https://codesandbox.io/s/chakra-react-select-custom-option-d99s7?file=/example.js

import { Icon } from "@chakra-ui/react";
import { Select, chakraComponents } from "chakra-react-select";
import {
  GiJellyBeans,
  GiChocolateBar,
  GiStrawberry,
  GiCherry
} from "react-icons/gi";

const flavorOptions = [
  {
    value: "vanilla",
    label: "Vanilla",
    icon: <Icon as={GiJellyBeans} color="orange.700" mr={2} h={5} w={5} />
  },
  {
    value: "chocolate",
    label: "Chocolate",
    icon: <Icon as={GiChocolateBar} color="yellow.800" mr={2} h={5} w={5} />
  },
  {
    value: "strawberry",
    label: "Strawberry",
    icon: <Icon as={GiStrawberry} color="red.500" mr={2} h={5} w={5} />
  },
  {
    value: "cherry",
    label: "Cherry",
    icon: <Icon as={GiCherry} color="red.600" mr={2} h={5} w={5} />
  }
];

const customComponents = {
  Option: ({ children, ...props }) => (
    <chakraComponents.Option {...props}>
      {props.data.icon} {children}
    </chakraComponents.Option>
  )
};

const Example = () => (
  <Select
    isMulti
    name="flavors"
    options={flavorOptions}
    placeholder="Select some flavors..."
    components={customComponents}
  />
);

If this suits your needs then feel free to close it for now. I don't plan on adding any features that fundamentally change the inner workings of react-select, so you're better off asking there if it's something you'd like natively added.

However, if you have any more questions let me know! Or if you want me to make a TypeScript example instead I could do that as well.

[lcswillems]

Thanks a lot for your help!!