Easily restore your project to a previous version with our new Instant One-click Backup Recovery

Introducing the Hygraph-Image React Component

Introducing an awesome React Component to simplify the use of images stored in Hygraph: hygraph-image.
Fabian Beliza

Written by Fabian

Jan 19, 2018
graphcms-image React component for Lazy Load

Over at Hygraph, we are big fans of the React ecosystem. Our newest team member Hugo put together an awesome React Component to simplify the use of images stored in Hygraph: hygraph-image. You can find it on Github and npm!

hygraph-image makes it super easy to resize, automatically compress, optimize, and lazy load images. It takes advantage of Filestack's powerful API, which enables on the fly image transformations via URL parameters.

A sample component using hygraph-image might look like this:

import React from "react";
import GraphImg from "hygraph-image";
export default ({ data: { image } }) => (
<div>
<strong>Hello hygraph-image<strong>
<GraphIMG image={image} maxWidth={800} />
</div>
);
export const query = graphql`
query getAssets {
allAssets {
handle
width
height
}
}
`;

Please note, that this Component is still in beta and it's not recommended to use it in production until it reaches a stable release!

Blog Author

Fabian Beliza

Fabian Beliza

Product Manager

Fabian is one of the Product Managers at Hygraph.

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.