{"id":20218246,"url":"https://github.com/cannercms/react-loading-image","last_synced_at":"2025-04-10T15:47:45.656Z","repository":{"id":57334065,"uuid":"124216800","full_name":"CannerCMS/react-loading-image","owner":"CannerCMS","description":"A react image loader.","archived":false,"fork":false,"pushed_at":"2018-09-06T07:54:32.000Z","size":1094,"stargazers_count":13,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-29T07:23:03.236Z","etag":null,"topics":["image-loader","image-loading","loading-spinner","react"],"latest_commit_sha":null,"homepage":"https://canner.github.io/react-loading-image/","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/CannerCMS.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":"2018-03-07T10:06:58.000Z","updated_at":"2022-09-25T15:35:43.000Z","dependencies_parsed_at":"2022-08-24T20:20:59.713Z","dependency_job_id":null,"html_url":"https://github.com/CannerCMS/react-loading-image","commit_stats":null,"previous_names":["canner/react-imgloader"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Freact-loading-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Freact-loading-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Freact-loading-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Freact-loading-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CannerCMS","download_url":"https://codeload.github.com/CannerCMS/react-loading-image/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224580207,"owners_count":17334730,"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":["image-loader","image-loading","loading-spinner","react"],"created_at":"2024-11-14T06:37:44.028Z","updated_at":"2024-11-14T06:37:44.722Z","avatar_url":"https://github.com/CannerCMS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-loading-image [![NPM version][npm-image]][npm-url]  [![Dependency Status][daviddm-image]][daviddm-url] [![Greenkeeper badge](https://badges.greenkeeper.io/Canner/react-loading-image.svg)](https://greenkeeper.io/)\n\u003e A react image loader component\n\n![preview](./docs/image-loader.gif)\n\n\n## Installation\n\n```sh\n$ npm install --save react-loading-image\n```\n\n## Usage\n\n```js\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      value: null\n    };\n  }\n\n  onChange = (e) =\u003e {\n    this.setState({\n      value: e.target.value\n    });\n  }\n\n  render() {\n    const {value} = this.state;\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003eCopy a image URL here\u003c/h1\u003e\n        \u003cinput onChange={this.onChange}/\u003e\n        \u003cp\u003e\n          value: {value}\n        \u003c/p\u003e\n        \u003cdiv\u003e\n          {value \u0026\u0026 (\n            \u003cImageLoader\n              src={value}\n              loading={() =\u003e \u003cdiv\u003eLoading...\u003c/div\u003e}\n              error={() =\u003e \u003cdiv\u003eError\u003c/div\u003e}\n              /\u003e\n          )}\n        \u003c/div\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n## Advanced\n\nYou might want to customized such as `\u003cdiv/\u003e` as your final view, instead of `\u003cimg/\u003e` tags, you can use `image` prop to replace any React element as you wish!\n\nFor example, using `styled-components`:\n\n\n```js\nimport styled from 'styled-components';\n\nconst PreviewImg = styled.div`\n  background-image: url(${props =\u003e props.src});\n  width: 100%;\n  height: 300px;\n  background-size: contain;\n  background-repeat: no-repeat;\n`;\n\nclass Demo extends React.Component {\n  ...\n\n  render() {\n    const {value} = this.props;\n    return (\n      \u003cdiv\u003e\n        \u003cImageLoader\n          src={value}\n          image={props =\u003e \u003cPreviewImg {...props}/\u003e} // change to your customized component\n          loading={() =\u003e \u003cdiv\u003eLoading...\u003c/div\u003e}\n          error={() =\u003e \u003cdiv\u003eError\u003c/div\u003e}\n          /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n\n## Props\n\n| Name         | Type    | Default | Description |\n| ------------ | ------- | ------- | ----------- |\n| src | string | null | Image URL |\n| style | style Object | null | Pass style object to set image's style |\n| className | string | null | Set image's className |\n| onLoad | (img: Image) =\u003e void | null | This function will be called when image is loaded |\n| onError | (err: Event) =\u003e void | null | This function will be called when image is failed |\n| loading | () =\u003e React.Element\u003c*\u003e | null | Return a React element that will show when image is loading |\n| error | () =\u003e React.Element\u003c*\u003e | null | Return a React element that will show when image is crashed |\n| image | ({src: string, width: number, height: number}) =\u003e React.Element\u003c*\u003e | null | Final result will render to this customized React element, if you don't assign this props default image will render into `\u003cimg src={src} width={width} height={height}/\u003e` |\n\n## Start example server\n\n```\nnpm start\n```\n\n## generate demo\n\n```js\nnpm run gh-pages\n```\n\n## License\n\nMIT © [chilijung](www.github.com/chilijung)\n\n\n[npm-image]: https://badge.fury.io/js/react-loading-image.svg\n[npm-url]: https://npmjs.org/package/react-loading-image\n[travis-image]: https://travis-ci.org/Canner/react-loading-image.svg?branch=master\n[travis-url]: https://travis-ci.org/Canner/react-loading-image\n[daviddm-image]: https://david-dm.org/Canner/react-loading-image.svg?theme=shields.io\n[daviddm-url]: https://david-dm.org/Canner/react-loading-image\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcannercms%2Freact-loading-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcannercms%2Freact-loading-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcannercms%2Freact-loading-image/lists"}