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!
