React-select: Customizing components in TypeScript

[lorenzoferrante]

Hi,
I'm trying to customize the Dropdown Indicator following the example here, but in my project I'm using Typescript and I'm getting errors.
Do you know how to adapt the Dropdown indicator example using Typescript?

Thanks

[lorenzoferrante]

This is the component I'm returning, as in the example:

const CustomDropdownIndicator = (
    props: IndicatorProps<any>
  ) => {
    return (
      <components.DropdownIndicator {...props}>
      </components.DropdownIndicator>
    );
};

The error I'm getting from this code is:
JSX element type 'components.DropdownIndicator' does not have any construct or call signatures

[kelvinlouis]

@lorenzoferrante did you find a way of solving this issue without using @ts-ignore?
I am experiencing the same issue. The same is also true if you want to customize ClearIndicator.

[lorenzoferrante]

I've managed this issue by creating a custom component like this:

export const DropdownIndicator = (props: IndicatorProps<any>) => {
    const { className, cx, getStyles, innerProps } = props;
    return (
        <div
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...innerProps}
            css={getStyles('dropdownIndicator', props)}
            className={cx(
                'customDropdown',
                {
                    indicator: true,
                    'dropdown-indicator': true,
                },
                undefined,
            )}
        >
            <IconDropDownIndicator classes={['icon-height-10', 'icon-dark-grey']} />
        </div>
    );
};