V5: Custom selectProps require ts-ignore in Typescript

Hi, congrats on the big v5 release!

After upgrading to v5, use of custom props on Select cause errors in Typescript. They still seem to work but require ts-ignore directive to silence the error.

Example:

    <Select<MyOption>
      id={id}
      options={options}
     {... more props ...}
      components={{ SingleValue }}
      myCustomProp='foobar'
    />

function SingleValue({ children, ...props }: SingleValueProps<MyOption>) {
  return (
      <div>
        <label htmlFor={selectProps.name}>
          {props.selectProps.myCustomProp}
        </label>
         <components.SingleValue {...props}>{children}</components.SingleValue>
         <div className="ml-1">
            <components.DownChevron />
         </div>
      </div>)
}

[Methuselah96]

Sorry, I forgot to include how to type custom selectProps in the upgrade guide and TypeScript usage documentation. I’ll work on adding that documentation.

The only reason this worked for @types/react-select is because there was an index signature that would type any unknown prop as any. This was a little bit too loose and was causing numerous problems. In order to do this in v5 you’ll need to use module augmentation to augment the type of the Select props. Here’s how to update your example so it works in v5:

import Select, { components, GroupBase, SingleValueProps } from 'react-select';

declare module 'react-select/dist/declarations/src/Select' {
  export interface Props<
    Option,
    IsMulti extends boolean,
    Group extends GroupBase<Option>
  > {
    myCustomProp: string;
  }
}

function SingleValue({
  children,
  ...props
}: SingleValueProps<MyOption, false>) {
  return (
    <div>
      <label htmlFor={props.selectProps.name}>
        {props.selectProps.myCustomProp}
      </label>
      <components.SingleValue {...props}>{children}</components.SingleValue>
      <div className="ml-1">
        <components.DownChevron />
      </div>
    </div>
  );
}

export default function App() {
  return (
    <Select<MyOption>
      id={id}
      options={options}
      components={{ SingleValue }}
      myCustomProp="foobar"
    />
  );
}

Let me know if that works for you.

[Methuselah96]

No, unfortunately there’s no way to specify it per component. Note there also wasn’t a way to do this for @types/react-select either. If you want to go back to that behavior you can just augment the props with an index signature that allows any prop.

I’ve looked into trying to make it so that the custom props could be another generic on the Select component, but it made the types much more complex and I think I had trouble getting it working well. Feel free to give it a try yourself and we’d be happy to merge a PR if it doesn’t add too much complexity.