{"id":16374813,"url":"https://github.com/jameslnewell/react-render-image","last_synced_at":"2025-03-16T15:33:41.194Z","repository":{"id":27324308,"uuid":"113386233","full_name":"jameslnewell/react-render-image","owner":"jameslnewell","description":"Render an image in React.","archived":false,"fork":false,"pushed_at":"2023-01-06T01:53:48.000Z","size":4486,"stargazers_count":8,"open_issues_count":14,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-07T12:37:33.402Z","etag":null,"topics":["hook","image","load","react","react-image-load","react-load-image","render","render-prop","use-image","useimage"],"latest_commit_sha":null,"homepage":"https://jameslnewell.github.io/react-render-image/","language":"TypeScript","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/jameslnewell.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-07T01:21:14.000Z","updated_at":"2020-09-14T13:47:19.000Z","dependencies_parsed_at":"2023-01-14T07:30:26.167Z","dependency_job_id":null,"html_url":"https://github.com/jameslnewell/react-render-image","commit_stats":null,"previous_names":["jameslnewell/react-image-render"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Freact-render-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Freact-render-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Freact-render-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Freact-render-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jameslnewell","download_url":"https://codeload.github.com/jameslnewell/react-render-image/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243822310,"owners_count":20353498,"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":["hook","image","load","react","react-image-load","react-load-image","render","render-prop","use-image","useimage"],"created_at":"2024-10-11T03:18:28.491Z","updated_at":"2025-03-16T15:33:40.884Z","avatar_url":"https://github.com/jameslnewell.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-render-image\n\n[![Build Status](https://travis-ci.org/jameslnewell/react-render-image.svg?branch=master)](https://travis-ci.org/jameslnewell/react-render-image)\n\nRender an image in React.\n\n## Installation\n\n```bash\nnpm install --save react-render-image\n// OR\nyarn add react-render-image\n```\n\n## Usage\n\n[Example](https://jameslnewell.github.io/react-render-image/) ([source](https://github.com/jameslnewell/react-render-image/blob/master/example/App.js))\n\n```js\nimport React from 'react';\nimport {Image, useImage} from 'react-render-image';\n\nconst {image, loaded, errored} = useImage({src});\n\n\u003cImage src={src} loading=\"🔄\" loaded=\"✅\" errored=\"❌\"/\u003e\n\n\u003cImage src={src} loading=\"🔄\" errored=\"❌\"\u003e\n  {({image, loaded, errored}) =\u003e {\n    return \u003cimg src={image.src} width={image.width} height={image.height}/\u003e;\n  }}\n\u003c/Image\u003e\n```\n\n## API\n\n### \u0026lt;Image/\u0026gt;\n\n#### Props\n\n##### src (required)\n\n\u003e `string`\n\nThe image URI.\n\n##### srcset\n\n\u003e `string`\n\nThe image URIs to use given various conditions. See the [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset) for further detail.\n\n##### sizes\n\n\u003e `string`\n\nThe width of the image given various conditions. See the [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes) for further detail.\n\n##### loading\n\n\u003e React.Node\n\nRendered when the image is `loading`.\n\n##### loaded\n\n\u003e React.Node\n\nRendered when the image is `loaded`.\n\n##### errored\n\n\u003e React.Node\n\nRendered when the image is `errored`.\n\n##### children\n\n\u003e `({ image?: Image; status: enum, loaded: boolean; errored: boolean; }) =\u003e React.Node`\n\nCalled to render something when the image is `loading`, `loaded` or `errored`.\n\n**Parameters:**\n\n* `status` - An enum indicating whether the image is loading, loaded or errored.\n* `loaded` - A `boolean` indicating whether the image has loaded.\n* `errored` - A `boolean` indicating whether the image has errored.\n* `image` - The `Image` object. This can be used to inspect the `width` and `height` of the image, or it can be drawn onto a canvas using `ctx.drawImage()`.\n\n**Returns:**\n\n\u003e `RectNode`\n\n##### onLoad\n\n\u003e `() =\u003e void`\n\nCalled when the image has been loaded.\n\n##### onError\n\n\u003e `() =\u003e void`\n\nCalled when the image cannot be loaded.\n\n### useImage(options)\n\n\u003e `useImage({ src?: string; srcset: string[]; sizes: string[]; }) =\u003e {status, image?: Image}`\n\n**Parameters:**\n\n* `src` - An enum indicating whether the image is loading, loaded or errored.\n* `srcset` - The image URIs to use given various conditions. See the [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset) for further detail.\n* `sizes` - The image URIs to use given various conditions. See the [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes) for further detail.\n\n**Returns:**\n\n\u003e * `status` - An enum indicating whether the image is loading, loaded or errored.\n\u003e * `loaded` - A `boolean` indicating whether the image has loaded.\n\u003e * `errored` - A `boolean` indicating whether the image has errored\n\u003e * `image` - The `Image` object. This can be used to inspect the `width` and `height` of the image, or it can be drawn onto a canvas using `ctx.drawImage()`.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjameslnewell%2Freact-render-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjameslnewell%2Freact-render-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjameslnewell%2Freact-render-image/lists"}