This React component called
Image is used to display images in a web application. It is styled using the
styled method from the
@theme library, which allows the component to be customized with CSS styles.
Image component has several props (short for properties) that can be passed to it when it is used in a parent component. These props include:
src: the URL of the image to be displayed
alt: a text description of the image for screen readers and search engines
priority: a boolean value indicating whether the image should be given priority for loading
sizes: a string specifying the size of the image for different screen sizes
css: a CSS object containing styles to be applied to the component
className: a string containing class names to be applied to the component
children: any elements that should be rendered inside the component
mediaDetails: an object containing information about the media (e.g. width and height)
height: the height of the image
width: the width of the image
quality: the quality of the image
onLoadingComplete: a function to be called when the image finishes loading
fadeInOnLoad: a boolean value indicating whether the image should fade in when it finishes loading
Image component also has several interface types that it extends, including
MarginProps, which define additional props that can be passed to the component.
Image component uses the
useState hook from the
react library to manage the component's state. It has a single state value called
opacity, which is initially set to 0 if
true, or 1 if
false. The component's
opacity state is used to control the transition effect when the image finishes loading.
Image component also includes a helper function called
reshapeArrayProps from the
@theme library, which is used to reshape the
passedHeight prop based on the aspect ratio of the image.