React Strapi Img

Overview

The react-strapi-img library is a wrapper for img that handles webp-support, responsive sizes, lazyloading, and loading animation. It is optimized to consume image data from Strapi, but can also be useful in other contexts. However, it is important to note that this library is still in beta-state and its API may change without warning.

Features

• Wrap image in a proportional container to preserve and determine height
• Lazyload image
• Transform Strapi image formats object into srcset
• Add blurred, animated base64 placeholder
• Use WebP format if supported
• Add noscript-image for SEO
• Decode images before rendering for better performance

Installation

To install the react-strapi-img library, follow these steps:

1. Install the required peer dependencies:

   • react (>= 16.8.0)
   • react-dom (>= 16.8.0)
   • styled-components (>= 5.2.0)

2. Setup image-resizing in Strapi by copying the “services” folder from the library to the Strapi-folder /extensions/upload. This allows the library to resize every uploaded image, including:

   • Conversion to base64
   • Resizing to sizes from 400px to the original image width in steps of 200px, with a maximum of 3000px
   • Addition of the original image size as the largest breakpoint

3. Fetch the image with GraphQL in your React component and use it with the react-strapi-img library.

Summary

The react-strapi-img library is a feature-rich wrapper for img that handles webp-support, responsive sizes, lazyloading, and loading animation. It is specifically designed to consume image data from Strapi, but can be used in other contexts as well. It offers a wide range of features to enhance image loading and performance, making it a valuable tool for developers working with image-heavy applications. However, it is important to note that the library is currently in beta-state and its API may change in the future.