{"id":20216790,"url":"https://github.com/hygraph/react-image","last_synced_at":"2026-03-12T17:26:35.201Z","repository":{"id":41988975,"uuid":"116407621","full_name":"hygraph/react-image","owner":"hygraph","description":"Universal lazy-loading, auto-compressed images with React and GraphCMS","archived":false,"fork":false,"pushed_at":"2024-03-26T03:08:33.000Z","size":1007,"stargazers_count":111,"open_issues_count":16,"forks_count":19,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-03T01:58:13.047Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hygraph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-05T17:00:04.000Z","updated_at":"2024-07-06T20:51:06.000Z","dependencies_parsed_at":"2024-11-14T06:40:09.011Z","dependency_job_id":null,"html_url":"https://github.com/hygraph/react-image","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hygraph%2Freact-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hygraph%2Freact-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hygraph%2Freact-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hygraph%2Freact-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hygraph","download_url":"https://codeload.github.com/hygraph/react-image/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248243217,"owners_count":21071054,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T06:29:46.534Z","updated_at":"2026-03-12T17:26:30.134Z","avatar_url":"https://github.com/hygraph.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e@graphcms/react-image\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eUniversal lazy-loading, auto-compressed images with React and Hygraph.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://npmjs.org/package/@graphcms/react-image\"\u003e\n \u003cimg src=\"https://img.shields.io/npm/v/@graphcms/react-image.svg\" alt=\"Version\" /\u003e\n \u003c/a\u003e\n \u003ca href=\"https://npmjs.org/package/@graphcms/react-image\"\u003e\n \u003cimg src=\"https://img.shields.io/npm/dw/@graphcms/react-image.svg\" alt=\"Downloads/week\" /\u003e\n \u003c/a\u003e\n \u003ca href=\"https://github.com/hygraph/react-image/stargazers\"\u003e\n \u003cimg src=\"https://img.shields.io/github/stars/hygraph/react-image\" alt=\"Forks on GitHub\" /\u003e\n \u003c/a\u003e\n \u003cimg src=\"https://badgen.net/bundlephobia/minzip/@graphcms/react-image\" alt=\"minified + gzip size\" /\u003e\n \u003cbr/\u003e\n \u003ca href=\"https://graphcms-image.netlify.com/?down=0\"\u003eDemo\u003c/a\u003e • \u003ca href=\"https://slack.hygraph.com\"\u003eJoin us on Slack\u003c/a\u003e • \u003ca href=\"https://app.hygraph.com\"\u003eLogin to Hygraph\u003c/a\u003e • \u003ca href=\"https://twitter.com/hygraphcom\"\u003e@hygraphcom\u003c/a\u003e\n\u003c/p\u003e\n\n* Resize large images to the size needed by your design.\n* Generate multiple smaller images to make sure devices download the optimal-sized one.\n* Automatically compress and optimize your image with the powerful Filestack API.\n* Efficiently lazy load images to speed initial page load and save bandwidth.\n* Use the \"blur-up\" technique or solid background color to show a preview of the image while it loads.\n* Hold the image position so your page doesn't jump while images load.\n\n## Quickstart\n\nHere's an example using a static asset object.\n\n```jsx\nimport React from \"react\";\nimport Image from \"@graphcms/react-image\";\n\nconst IndexPage = () =\u003e {\n const asset = {\n handle: \"uQrLj1QRWKJnlQv1sEmC\",\n width: 800,\n height: 800\n }\n\n return \u003cImage image={asset} maxWidth={800} /\u003e\n}\n```\n\n## Install\n\n```bash\nnpm install @graphcms/react-image\n```\n\n## Props\n\n| Name | Type | Description |\n| ----------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `image` | `object` | An object of shape `{ handle, width, height }`. Handle is an identifier required to display the image and both `width` and `height` are required to display a correct placeholder and aspect ratio for the image. You can get all 3 by just putting all 3 in your image-getting query. |\n| `maxWidth` | `number` | Maximum width you'd like your image to take up. (ex. If your image container is resizing dynamically up to a width of 1200, put it as a `maxWidth`) |\n| `fadeIn` | `bool` | Do you want your image to fade in on load? Defaults to `true` |\n| `fit` | `\"clip\"\\|\"crop\"\\|\"scale\"\\|\"max\"` | When resizing the image, how would you like it to fit the new dimensions? Defaults to `crop`. You can read more about resizing [here](https://www.filestack.com/docs/api/processing/#resize) |\n| `withWebp` | `bool` | If webp is supported by the browser, the images will be served with `.webp` extension. (Recommended) |\n| `transforms` | `array` | Array of `string`s, each representing a separate Filestack transform, eg. `['sharpen=amount:5', 'quality=value:75']` |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string\\|object` | Passed to the wrapper div. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string\\|object` | Passed to the outer wrapper div. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper div |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `blurryPlaceholder` | `bool` | Would you like to display a blurry placeholder for your loading image? Defaults to `true`. |\n| `backgroundColor` | `string\\|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `baseURI` | `string` | Set the base src from where the images are requested. Base URI Defaults to `https://media.graphassets.com` |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhygraph%2Freact-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhygraph%2Freact-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhygraph%2Freact-image/lists"}