2.0.4 • Published 17 days ago
@burrow/graphcms-image v2.0.4
- 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 string s, 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 |
2.0.4
17 days ago
2.0.4-rc.0
1 month ago
2.0.3
1 month ago
2.0.3-rc.0
1 month ago
2.0.2
2 years ago
2.0.1
2 years ago
2.0.0
2 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago