V5: Custom selectProps require ts-ignore in Typescript

[jmrossy]

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.

[jmrossy]

@Methuselah96 Works for me! Thanks for the response :)

[vjee]

Is there any way to make this work with multiple components?
Our application has multiple select components that all pass different props to Select to be used in custom child components.
The solution above is global and would require optional props to make it work but that's not very clean.

Thanks in advance.

[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.

[doubleforte]

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

I tried adding the declare to my react-app-env.d.ts file and the app crashes because it can't find my custom prop. If I have it in a separate file it works just fine. Any idea why this wouldn't work in react-app-env.d.ts?

[Methuselah96]

No, not off-hand. Are you sure react-app-env.d.ts is being included in the TypeScript compilation? That's the only thing I can think of. Also, I assume you're importing GroupBase in react-app-env.d.ts?