Reusable Select styles with generic type

[sebastianturbiarz]

Hey, I would like to create resable react-select component. But I got problem with figure out good types.

I created codesandbox where you can check what I would like to achieve.

Basically Select component have Generic OptionType, and it works fine until I want to add custom styles and custom OptionComponent. I think it is just impossible to have it generic.

Do you have any idea is there any solution?

[Methuselah96]

If your Option type is always going to be MyOptionType you can remove the generic like this: https://codesandbox.io/s/63696310-how-to-use-typescript-with-the-definition-of-custom-styles-for-a-select-using-re-forked-oix91?file=/src/App.tsx.

[sebastianturbiarz]

My Option type is not always the same. Also I got custom OptionComponent which also required those type

export const SelectOption = (props: ReactSelectOptionProps<SomeGenericOptionType, false>) => {
  const { children } = props

  return (
    <components.Option {...props}>
      <div>
        {children}
      </div>
    </components.Option>
  )
}

[Methuselah96]

How about this: https://codesandbox.io/s/63696310-how-to-use-typescript-with-the-definition-of-custom-styles-for-a-select-using-re-forked-oix91?file=/src/App.tsx. Note that I had to update @types/react-select to 4.0.17 to get this to work correctly.