How do you extract a specific TypeScript prop type from a React component?

Question

I'm creating my own Image component and want to reuse React's image component ImageSourcePropType for my source/previewSource props.

Here's the component.

import React from 'react';
import { Image, ImageBackground } from 'react-native';

type ImageSourceProp = React.ComponentProps<typeof Image>.ImageSourcePropType; // HOW?

interface CachedImageProps {
  source: ImageSourceProp;
  previewSource: ImageSourceProp;
}

const CachedImage: React.FC<CachedImageProps> = ({ source, previewSource, ...remainingProps }) => {
  // console.log('TRIGGERED CachedImage')

  return (
    <ImageBackground source={previewSource|| source} fadeDuration={0} {...remainingProps}>
      <Image source={cachedSource} fadeDuration={0} {...remainingProps} />
    </ImageBackground>
  );
};

export default CachedImage;

How do I get the ImageSourcePropType?

Why not just import the type from 'react-native'? The type is exported from the module, so you can add it to your list of imports easily: import { Image, ImageBackground, ImageSourcePropType } from 'react-native'; — kschaer
– kschaer, Commented Jan 7, 2020 at 17:18
Ha! I didn't realize that. Also found another way after posting the question yesterday. I'll add an answer. — GollyJer
– GollyJer, Commented Jan 7, 2020 at 17:56

GollyJer · Accepted Answer · 2020-01-07 18:00:35Z

5

OK, figured this one out. There are two ways to do it.

Access via name.

type ImageSourcePropType = React.ComponentProps<typeof Image>['source'];

Access via import.

import { ImageSourcePropType } from 'react-native';

_{(hat tip @kschaer)}

answered Jan 7, 2020 at 18:00

GollyJer

27.2k18 gold badges126 silver badges190 bronze badges

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

1 Comment

Dan Over a year ago

Yep! you can also roll your own type. type PropsOf<C> = C extends (props: infer P) => any ? P : never

Collectives™ on Stack Overflow

How do you extract a specific TypeScript prop type from a React component?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related