How to use react-select types when creating custom components?

Question

I am trying to create custom components for DropdownIndicator and use on react-select with Typescript, but I am having some issues with the type of the component because I am new to typescript.

How can I use types defined on @types/react-select on my component?

I've installed @types/react-select and there is already a type for DropdownIndicator, but I've found no way to reference it.

This is my index.tsx:

import React from 'react';
import Select from 'react-select';

import DropdownIndicator from './dropdown-indicator';

const components = {
  DropdownIndicator,
};

const SelectFilter: React.FC = () => {
  return <Select components={components} />;
};

export default React.memo(SelectFilter);

This is my dropdown-indicator.tsx:

import React from 'react';

import DropdownIcon from './dropdown-icon';

const DropdownIndicator: React.FC = props => {
  const {
    selectProps: { isMenuOpen },
  } = props;

  return <DropdownIcon isUp={isMenuOpen} />;
};

export default React.memo(DropdownIndicator);

Since I didn't defined any prop types, the error is:

/Users/felipepinheiro/Workspace/test/src/components/select-filter/dropdown-indicator.tsx
TypeScript error in /Users/felipepinheiro/Workspace/test/src/components/select-filter/dropdown-indicator.tsx(7,5):
Property 'selectProps' does not exist on type '{ children?: ReactNode; }'.  TS2339

     5 | const DropdownIndicator: React.FC = props => {
     6 |   const {
  >  7 |     selectProps: { isMenuOpen },
       |     ^
     8 |   } = props;
     9 | 
    10 |   return <DropdownIcon isUp={isMenuOpen} />;

use props.selectProps.menuIsOpen not isMenuOpen ;) and do not destruct them. — vaske
– vaske, Commented Sep 24, 2019 at 9:58
You could do something like this where you pass the component directly into the function and import the IndicatorProps type ts import {IndicatorProps } from 'react-select'; const SelectFilter: React.FC = () => { return <Select components={{ Indicator: (indicatorProps: IndicatorProps<any>) => ( <components.DropdownIndicator {...indicatorProps} /> ), }} />; }; — Emma
– Emma, Commented Nov 27, 2019 at 23:57

Emma · Accepted Answer · 2021-09-20 16:27:58Z

8

I left a comment but putting this in an answer since it'll be more legible with proper formatting

You can directly import the IndicatorProps type from react-select package and then pass your props to the component directly from within your select component

import { IndicatorProps, OptionType } from 'react-select';


const SelectFilter: React.FC = () => {
  return <Select components={{
    Indicator: (indicatorProps: IndicatorProps<OptionType>) => (
      <components.DropdownIndicator {...indicatorProps} />
    ),
  }} />;
};

edited Sep 20, 2021 at 16:27

answered Nov 28, 2019 at 16:14

Emma

83314 silver badges21 bronze badges

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

4 Comments

Pavlo Zhukov Over a year ago

What is the right way to avoid any inside Record<string, unknown>?

Emma Over a year ago

I think if you import the OptionType type and use that instead of <any> it should work correctly

Pavlo Zhukov Over a year ago

It works. But there is a problem with @typescript-eslint/no-explicit-any ESLint rule, and I'm asking to figure out how to overcome it correctly.

Emma Over a year ago

I'm familiar with the rule, so I updated my above example to include my proposed answer that uses <OptionType> instead of <any>. Where are you trying to use Record<string, unknown>? If you show me an example I might be able to better help

Collectives™ on Stack Overflow

How to use react-select types when creating custom components?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related