• Resize large images to the size needed by your design.
• Generate multiple smaller images to make sure devices download the optimal-sized one.
• Automatically compress and optimize your image with the powerful Filestack API.
• Efficiently lazy load images to speed initial page load and save bandwidth.
• Use the "blur-up" technique or solid background color to show a preview of the image while it loads.
• Hold the image position so your page doesn't jump while images load.

Quickstart

Here's an example using a static asset object.

import React from "react";
import Image from "@graphcms/react-image";

const IndexPage = () => {
  const asset = {
    handle: "uQrLj1QRWKJnlQv1sEmC",
    width: 800,
    height: 800
  }
  
  return <Image image={asset} maxWidth={800} />
}

Install

npm install @graphcms/react-image

Props

| Name | Type | Description | | ----------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | image | object | An object of shape { handle, width, height }. Handle is an identifier required to display the image and both width and height are required to display a correct placeholder and aspect ratio for the image. You can get all 3 by just putting all 3 in your image-getting query. | | maxWidth | number | Maximum width you'd like your image to take up. (ex. If your image container is resizing dynamically up to a width of 1200, put it as a maxWidth) | | fadeIn | bool | Do you want your image to fade in on load? Defaults to true | | fit | "clip"\|"crop"\|"scale"\|"max" | When resizing the image, how would you like it to fit the new dimensions? Defaults to crop. You can read more about resizing here | | withWebp | bool | If webp is supported by the browser, the images will be served with .webp extension. (Recommended) | | transforms | array | Array of strings, each representing a separate Filestack transform, eg. ['sharpen=amount:5', 'quality=value:75'] | | title | string | Passed to the img element | | alt | string | Passed to the img element | | className | string\|object | Passed to the wrapper div. Object is needed to support Glamor's css prop | | outerWrapperClassName | string\|object | Passed to the outer wrapper div. Object is needed to support Glamor's css prop | | style | object | Spread into the default styles in the wrapper div | | position | string | Defaults to relative. Pass in absolute to make the component absolute positioned | | blurryPlaceholder | bool | Would you like to display a blurry placeholder for your loading image? Defaults to true. | | backgroundColor | string\|bool | Set a colored background placeholder. If true, uses "lightgray" for the color. You can also pass in any valid color string. | | onLoad | func | A callback that is called when the full-size image has loaded. | | baseURI | string | Set the base src from where the images are requested. Base URI Defaults to https://media.graphcms.com |