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 } }) => (

Hello graphcms-image


export const query = graphqlquery 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!

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