In my React and Typescript project I have to render some images (a small, medium or large) but based on e.g. a variant
prop I have to render the relevant image.
I created a mapping for simplicity for the images data (or do I have to structure it differently?):
const ImageMapping = {
exampleTypeOne: {
ImageSmall: ImageSmallTypeOne,
ImageMedium: ImageMediumTypeOne,
ImageLarge: ImageLargeTypeOne,
},
exampleTypeTwo: {
ImageSmall: ImageSmallTypeTwo,
ImageMedium: ImageMediumTypeTwo,
ImageLarge: ImageLargeTypeTwo,
},
};
return (
<picture>
<source media={`(max-width: ${breakPoints.xs}px)`} srcSet={ImageSmall} />
<source media={`(max-width: ${breakPoints.md}px)`} srcSet={ImageMedium} />
<img
src={ImageLarge}
alt="My alt"
width="480"
height="400"
/>
</picture>
)
How do I create a clean and simple function to render the various images based on e.g. a variant
prop like:
export type Props = {
variant: 'typeOne' | 'typeTwo';
};