Typescript react-select Custom Input Component InputProps type is incompatible

Question

I cannot type the inputProps of React-Select's Input Component. I checked the Input.d.ts, but it seems the InputProps interface is different from the other component such as ControlProps or OptionProps.

How should I implement it so that I can access the current input value and options inside the CustomInput component?

const CustomInput = (inputProps: any) => {
    ...
    return (
      <>
        <components.Input {...inputProps} />
        ...
      </>
    );
  };

<RcSelect
   components={{
     ...
     Input: CustomInput,
   }}
   ...
/>

Using any works for my purpose, but I need to type it to eliminate lint warning.

Soufiane Boutahlil · Accepted Answer · 2021-09-16 15:50:54Z

2

You should change inputProps type from any to InputProps by importing type InputProps, and in order to get options and value you have to destruct your object inputProps.

CustomInput.ts

import Select, {InputProps,OptionType,OptionsType,} from 'react-select';

const CustomInput = (inputProps: InputProps) => {
  const getValue: () => OptionsType<OptionType> = inputProps.getValue;
  const options: OptionsType = inputProps.options;
        
  console.log('value', getValue()); // <==== value
  console.log(options); // <==== options
        
  return <input {...inputProps} />; //
};

You can check this demo: https://stackblitz.com/edit/react-starter-typescript-jtpxxf?file=index.tsx

answered Sep 16, 2021 at 15:50

Soufiane Boutahlil

2,5941 gold badge9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript react-select Custom Input Component InputProps type is incompatible

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related