{"id":28096489,"url":"https://github.com/socialtables/react-image-fallback","last_synced_at":"2025-05-13T16:22:05.176Z","repository":{"id":36791487,"uuid":"41098275","full_name":"socialtables/react-image-fallback","owner":"socialtables","description":"stop displaying broken images, have another image to fallback on. ","archived":false,"fork":false,"pushed_at":"2023-07-08T04:22:49.000Z","size":474,"stargazers_count":111,"open_issues_count":20,"forks_count":18,"subscribers_count":37,"default_branch":"main","last_synced_at":"2025-04-29T05:41:38.355Z","etag":null,"topics":["library","mend","product-design-system","react-component","renovation"],"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/socialtables.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":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-08-20T13:50:27.000Z","updated_at":"2024-08-31T15:39:06.000Z","dependencies_parsed_at":"2024-06-18T14:06:48.070Z","dependency_job_id":null,"html_url":"https://github.com/socialtables/react-image-fallback","commit_stats":{"total_commits":85,"total_committers":16,"mean_commits":5.3125,"dds":0.6705882352941177,"last_synced_commit":"feb13e1b905592f93a3376b001d176ce40e44e0d"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/socialtables%2Freact-image-fallback","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/socialtables%2Freact-image-fallback/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/socialtables%2Freact-image-fallback/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/socialtables%2Freact-image-fallback/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/socialtables","download_url":"https://codeload.github.com/socialtables/react-image-fallback/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253360736,"owners_count":21896375,"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":["library","mend","product-design-system","react-component","renovation"],"created_at":"2025-05-13T16:22:00.333Z","updated_at":"2025-05-13T16:22:05.169Z","avatar_url":"https://github.com/socialtables.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Image Fallback\n\nReact Image Fallback exists for those times that you're just not sure an image will be there. See a simple demo \u003ca href=\"http://socialtables.github.io/react-image-fallback/demo/\"\u003ehere\u003c/a\u003e\n\n[![Circle CI](https://circleci.com/gh/socialtables/react-image-fallback.svg?style=svg)](https://circleci.com/gh/socialtables/react-image-fallback) [![TypeScript definitions on DefinitelyTyped](https://definitelytyped.org/badges/standard.svg)](http://definitelytyped.org)\n\n### Install\n` npm install react-image-fallback`\n\n### Required Props\n\n#### `src`\nA string represent the url to your primary image.\n\n#### `fallbackImage`\nA string representing the image you want to fallback to if your primary image is not there. Optionally this can also be passed in as a react element. This can also be passed in as an array of string srcs or react elements, the component will attempt to keep trying srcs until a loadable src is found. It should be noted that a react element will always be treated as a loadable src.\n\n### Optional Props\n\n#### `initialImage`\nThe image to show before your `src` or `fallbackImage` load. Can optionally be passed in as a react element.\n\n#### `initialTimeout`\ntimeout in millisecond before to show initialImage. Default is null which should initialImage immediately\n\n#### `onLoad`\nA callback called if initial image loads successfully, will be called with successful image url.\n\n#### `onError`\nA callback called if initial image load fails, will be called with failing image url.\n\n#### `spread props`\nThis component also utilizes jsx spread attributes to pass along custom image attributes such as alt tags and className. Only valid dom props will be spread to the image tag.\n\n### Use\n\n```js\nimport React From \"react\";\nimport ReactImageFallback from \"react-image-fallback\";\nexport default class ShowImage extends React.Component {\n\trender() {\n\t\treturn (\n\t\t\t\u003cdiv\u003e\n\t\t\t\t\u003cReactImageFallback\n\t\t\t\t\tsrc=\"my-image.png\"\n\t\t\t\t\tfallbackImage=\"my-backup.png\"\n\t\t\t\t\tinitialImage=\"loader.gif\"\n\t\t\t\t\talt=\"cool image should be here\"\n\t\t\t\t\tclassName=\"my-image\" /\u003e\n\t\t\t\u003c/div\u003e\n\t\t);\n\t}\n}\n```\n\n- - -\n\nCopyright (C) 2017 Social Tables, Inc. (https://www.socialtables.com) All rights reserved.\n\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use this file except in compliance with the License. You may obtain a copy of the License at\n\n\thttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsocialtables%2Freact-image-fallback","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsocialtables%2Freact-image-fallback","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsocialtables%2Freact-image-fallback/lists"}