{"_id":"@axetroy/react-img-lazy-load","_rev":"5-318a8ace35dbaa520f3f13e427c3dd36","name":"@axetroy/react-img-lazy-load","description":"Image lazy load component for react","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@axetroy/react-img-lazy-load","version":"0.1.0","description":"Image lazy load component for react","main":"index.js","scripts":{"start":"webpack-dev-server --config webpack.config.dev.js","dev":"rimraf lib && webpack --config webpack.config.prod.js --display-error-details --progress --colors --watch","build":"rimraf lib && webpack --config webpack.config.prod.js --display-error-details --progress --colors"},"keywords":["react","react-component","image","lazy-load"],"author":{"name":"axetroy"},"license":"MIT","dependencies":{"lodash.debounce":"^4.0.8"},"peerDependencies":{"react":"^15.4.2"},"devDependencies":{"babel-core":"^6.24.1","babel-loader":"^7.0.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","react":"^15.5.4","react-dom":"^15.5.4","rimraf":"^2.5.0","webpack":"^2.4.1","webpack-dev-server":"^2.4.5"},"gitHead":"010d6b2df8b439247cea5baef67a8cbd5d9944c3","_id":"@axetroy/react-img-lazy-load@0.1.0","_shasum":"4b962765f69358179f1b235dcc34ad382f5d2d54","_from":".","_npmVersion":"4.4.1","_nodeVersion":"6.10.0","_npmUser":{"name":"axetroy","email":"troy450409405@gmail.com"},"dist":{"shasum":"4b962765f69358179f1b235dcc34ad382f5d2d54","tarball":"https://registry.npmjs.org/@axetroy/react-img-lazy-load/-/react-img-lazy-load-0.1.0.tgz","integrity":"sha512-mM5OM3JuDqEAeYiwFewBOANJw+Rl54NlCuWprFpWkobmcj1VLrKS+H682sdqhCBItm44o0vtfy3vOrwjERdVqw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGkOWXF6HXLzF0/AsuJVq9t1y4a94kJawodmV2Gjb2ljAiEAyOPaNT6x5hAPYtjgtHJ6dgudoxjf51kpLisL35WVSPU="}]},"maintainers":[{"name":"axetroy","email":"troy450409405@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-img-lazy-load-0.1.0.tgz_1493972807519_0.5532751898281276"}},"0.1.1":{"name":"@axetroy/react-img-lazy-load","version":"0.1.1","description":"Image lazy load component for react","main":"index.js","scripts":{"start":"webpack-dev-server --config webpack.config.dev.js","dev":"rimraf lib && webpack --config webpack.config.prod.js --display-error-details --progress --colors --watch","build":"rimraf lib && webpack --config webpack.config.prod.js --display-error-details --progress --colors"},"keywords":["react","react-component","image","lazy-load"],"author":{"name":"axetroy"},"license":"MIT","dependencies":{"lodash.debounce":"^4.0.8"},"peerDependencies":{"react":"^15.4.2"},"devDependencies":{"babel-core":"^6.24.1","babel-loader":"^7.0.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","react":"^15.5.4","react-dom":"^15.5.4","rimraf":"^2.5.0","webpack":"^2.4.1","webpack-dev-server":"^2.4.5"},"gitHead":"a9dd35529b2228444e359226c33ac1bb58715bf5","_id":"@axetroy/react-img-lazy-load@0.1.1","_shasum":"bae0b5bd1554b44f0fc92e942315068bdf5ee710","_from":".","_npmVersion":"4.4.1","_nodeVersion":"6.10.0","_npmUser":{"name":"axetroy","email":"troy450409405@gmail.com"},"dist":{"shasum":"bae0b5bd1554b44f0fc92e942315068bdf5ee710","tarball":"https://registry.npmjs.org/@axetroy/react-img-lazy-load/-/react-img-lazy-load-0.1.1.tgz","integrity":"sha512-dEHGB7nP/mvTT9WzHOcdTolMANfS7BWyhOQMZ5KvnhpaVC1C0K6ehyl0Cx0JWMp0qfm+jwSzXcJ3KhgBiXhc0g==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEayac89h1AGZkI6x4ayrbUvm4oRYDkeYR/AUWqrVCKbAiA3AFvlvrWwtE2F6kZc4OMIlQX+3umwRvQ7VrN7jFrMYw=="}]},"maintainers":[{"name":"axetroy","email":"troy450409405@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/react-img-lazy-load-0.1.1.tgz_1493973627992_0.5929622121620923"}},"0.2.0":{"name":"@axetroy/react-img-lazy-load","version":"0.2.0","description":"Image lazy load component for react","main":"index.js","scripts":{"start":"webpack-dev-server --config webpack.config.dev.js","dev":"rimraf lib && webpack --config webpack.config.prod.js --display-error-details --progress --colors --watch","build":"rimraf lib && webpack --config webpack.config.prod.js --display-error-details --progress --colors"},"keywords":["react","react-component","image","lazy-load"],"author":{"name":"axetroy"},"license":"MIT","dependencies":{"lodash.debounce":"^4.0.8"},"peerDependencies":{"react":"^16.0.0"},"devDependencies":{"babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","react":"^16.2.0","react-dom":"^16.2.0","rimraf":"^2.6.2","webpack":"^3.10.0","webpack-dev-server":"^2.9.7"},"gitHead":"e3175dd93779a6d3ceacc568e5855ef12081a4a5","_id":"@axetroy/react-img-lazy-load@0.2.0","_npmVersion":"5.6.0","_nodeVersion":"8.9.0","_npmUser":{"name":"axetroy","email":"troy450409405@gmail.com"},"dist":{"integrity":"sha512-dxMOLCrVHb3dR5HGKTLRcf0d+amWyY6kcF4IklLH4gUg89FHo1spRNuN0Y67x7pA0xJnFWZPlOP6HzH8UlsAQw==","shasum":"1dd21cb4b4890bdb1fbac0039e825cddf615c0de","tarball":"https://registry.npmjs.org/@axetroy/react-img-lazy-load/-/react-img-lazy-load-0.2.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZmX/QGEgtL3epz26bGhqw3iiN/EJnfXOvVlJpAy9B3AiEAp5JeZkCbUG3707v2aagZo4YPbpiMNuD/6eHlYxq3xUc="}]},"maintainers":[{"name":"axetroy","email":"troy450409405@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-img-lazy-load-0.2.0.tgz_1513656098639_0.7339467257261276"}}},"readme":"# react-img-lazy-load\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/axetroy/react-img-lazy-load.svg)](https://greenkeeper.io/)\n\nImage lazy load component for react\n\n## Install\n\n```bash\nyarn add @axetroy/react-img-lazy-load\n```\n\n## Usage\n\n```jsx harmony\nimport React, { Component } from 'react';\nimport { render } from 'react-dom';\nimport LazyImage from '@axetroy/react-img-lazy-load';\n\nclass App extends Component {\n  state = {};\n  componentDidMount() {\n    this.setState({\n      src: 'https://avatars1.githubusercontent.com/u/9758711?v=3'\n    });\n    setTimeout(() => {\n      this.setState({\n        src: 'https://webpack.js.org/cd0bb358c45b584743d8ce4991777c42.svg'\n      });\n    }, 5000);\n  }\n  render() {\n    const { src } = this.state;\n    return (\n      <div>\n        <LazyImage\n          src={src}\n          width=\"200\"\n          height=\"300\"\n          onEnter={component => {\n            console.log('enter viewport', component);\n          }}\n          onLeave={component => {\n            console.info('leave viewport', component);\n          }}\n        />\n        <div style={{ height: '2000px', backgroundColor: '#e3e3e3' }}>\n          hello world\n        </div>\n        <LazyImage src={src} />\n      </div>\n    );\n  }\n}\n\nconst element = document.createElement('div');\ndocument.body.appendChild(element);\nrender(<App />, element);\n```\n\n## Props\n\n- src: string\n\n- onEnter: function\n\n- onLeave: function\n\n- and other props of img tag\n    \n## Run the Demo\n\n```bash\ngit clone https://github.com/axetroy/react-img-lazy-load.git\nyarn\nyarn start\n```\n\n### License\n\nThe [MIT License](https://github.com/axetroy/react-img-lazy-load/blob/master/LICENSE)","maintainers":[{"name":"axetroy","email":"troy450409405@gmail.com"}],"time":{"modified":"2022-06-12T14:55:11.696Z","created":"2017-05-05T08:26:47.748Z","0.1.0":"2017-05-05T08:26:47.748Z","0.1.1":"2017-05-05T08:40:30.314Z","0.2.0":"2017-12-19T04:01:38.751Z"},"keywords":["react","react-component","image","lazy-load"],"author":{"name":"axetroy"},"license":"MIT","readmeFilename":"README.md"}