@siteone/react-image-for-microservice

React companion component for image processing microservice.

Takes image of any format and when browser supports it returns u webp format of that image. U can tell to miroservice how to take care of your image. Croping, scaling, blur, quality, rotating, flip sides

Storybook Api doc

Usage example

<ImageProvider microserviceUrl="https://img.frontend.company"> // somewhere at top level of app
  <Image
    rotate={50}
    progressive
    flip="x" // x || y
    quality={100} // quality of image in %
    src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Michelangelo_Buonarroti_017.jpg" // img path
    blur={100} // quality of image in %
    scaleMode={scaleMode} // 'fit', 'downfit', 'upfit', 'fill', 'fill_auto', 'fill_center', 'fill_north', 'fill_northeast', 'fill_northwest', 'fill_east', 'fill_west', 'fill_south', 'fill_southeast', 'fill_southwest'
    width={500}
    height={500}
    alt="image description"
  />

    // ImageBox takes all params as Image expect alt, but instead of returning <img /> it will return as inlined backgroundImage
  <ImageBox tag="div" />
</ImageProvider>