{"id":18856005,"url":"https://github.com/rickycodes/react-load-img","last_synced_at":"2026-02-07T00:30:26.420Z","repository":{"id":57334012,"uuid":"111175147","full_name":"rickycodes/react-load-img","owner":"rickycodes","description":"🖼️ declarative images in react","archived":false,"fork":false,"pushed_at":"2018-04-29T03:48:31.000Z","size":646,"stargazers_count":1,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-25T01:20:21.957Z","etag":null,"topics":["fallback","images","npm","react"],"latest_commit_sha":null,"homepage":"https://rickycodes.github.io/react-load-img/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rickycodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-18T04:05:44.000Z","updated_at":"2018-09-25T02:33:06.000Z","dependencies_parsed_at":"2022-08-30T21:41:55.840Z","dependency_job_id":null,"html_url":"https://github.com/rickycodes/react-load-img","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rickycodes%2Freact-load-img","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rickycodes%2Freact-load-img/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rickycodes%2Freact-load-img/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rickycodes%2Freact-load-img/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rickycodes","download_url":"https://codeload.github.com/rickycodes/react-load-img/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239638457,"owners_count":19672663,"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":["fallback","images","npm","react"],"created_at":"2024-11-08T03:57:20.477Z","updated_at":"2026-02-07T00:30:24.323Z","avatar_url":"https://github.com/rickycodes.png","language":"JavaScript","readme":"# React Load IMG\n🖼️ pre-load and provide a fallback for images in react\n\n[![npm-version](https://img.shields.io/npm/v/react-load-img.svg?style=flat)](https://www.npmjs.com/package/react-load-img)\n[![build status](https://api.travis-ci.org/rickycodes/react-load-img.svg?branch=master)](https://travis-ci.org/rickycodes/react-load-img/)\n[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)\n\n## Why\nThe internet can be unpredictable and having a broken image in your web application is very uncool. This provides a way to add a pre-loader for a massive image and/or provide a fallback image in case your image fails to load for whatever reason.\n\n## Props\n\n### src `string`\n`src` is a string representing the url of the image you'd like to load (just like an img tag)\n\n### render `function`\n`render` is a function that receives an object as its only argument\n\nThe object contains the following keys:\n- src `string` (once loaded) otherwise `undefined`\n- error `object` (if loading fails) otherwise `undefined`\n\n## Install\n```bash\nnpm install -S react-load-img\n```\n## Basic Usage\n```javascript\n\u003cLoadImage\n  src='https://upload.wikimedia.org/wikipedia/commons/8/86/Redningsb%C3%A5den_k%C3%B8res_gennem_klitterne_%28high_resolution%29.jpg'\n  render={({ src, error }) =\u003e {\n    return src\n      ? \u003cimg src={src} /\u003e\n      : error\n        ? \u003cdiv\u003eFailed to load image :(\u003c/div\u003e\n        : \u003cdiv\u003eLoading...\u003c/div\u003e\n  }\n} /\u003e\n```\n## License\nCopyright © 2017 Ricky Miller (@rickycodes).\n\nReleased under the [MIT license](https://tldrlegal.com/license/mit-license).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frickycodes%2Freact-load-img","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frickycodes%2Freact-load-img","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frickycodes%2Freact-load-img/lists"}