Introducing the GraphCMS-Image React Component

Fabian Beliza's avatar

Fabian Beliza

19 January, 2018

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>
    <h1>Hello graphcms-image</h1>
    <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!

P.S.: Welcome Hugo! Keep the grind going and never stop 💯 🙌 🎯 💪 🙏

Are you ready?

Join our community of passionate developers!

Our Mission

GraphCMS enables developers to build powerful content APIs in a matter of minutes, while it gives content creators all the tools they need to manage their content. The hosted content APIs can be easily consumed by websites, apps or any other platform.

GraphCMS on TwitterGraphCMS on FacebookGraphCMS on GithubGraphCMS on SlackGraphCMS on InstagramGraphCMS on LinkedIn
CMS for ReactCMS for VuejsCMS for Apollo
CMS for Angular
CMS for Relay
CMS for AndroidCMS for iOS