Introducing the GraphCMS-Image React Component

Fabian Beliza
Fabian Beliza

January 19, 2018

Introducing the GraphCMS-Image React Component

Over at GraphCMS, 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 GraphCMS: graphcms-image. You can find it on Github and npm!

graphcms-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 graphcms-image might look like this:

import React from "react";
import GraphImg from "graphcms-image";

export default ({ data: { image } }) => (
  <div>
    <strong>Hello graphcms-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!


It's easy to get started

GraphCMS plans are flexibly suited to accommodate your growth. Get started for free, or reach out to our sales team to discuss larger projects with more complex needs

This site uses cookies to provide you with a better user experience. For more information, refer to our Privacy Policy