[FEATURE] Allow any React.ReactNode to be a label about chakra-react-select HOT 4 CLOSED

Thanks a lot for your help!!

from chakra-react-select.

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?

from chakra-react-select.

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

from chakra-react-select.

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.

from chakra-react-select.