Introducing the Hygraph-Image React Component

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!