{"_id":"@codemantion/lazy-load-image","_rev":"1-9b849c2ed8ab1dcd85539af87bdc504b","name":"@codemantion/lazy-load-image","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@codemantion/lazy-load-image","description":"A simple and lightweight React Component to lazy load images","author":{"name":"Akash Mohapatra","email":"mohapatra.akash99@gmail.com"},"version":"0.1.0","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/codemantion/lazy-load-image.git"},"bugs":{"url":"https://github.com/codemantion/lazy-load-image/issues"},"homepage":"https://github.com/codemantion/lazy-load-image","publishConfig":{"access":"public"},"module":"dist/lazy-load-image.esm.js","engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","lint":"eslint --ext ts --ext tsx --ext js --fix --ignore-path .eslintignore .","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"peerDependencies":{"react":">=16"},"peerDependenciesMeta":{"@types/react":{"optional":true}},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"size-limit":[{"path":"dist/lazy-load-image.cjs.production.min.js","limit":"10 KB"},{"path":"dist/lazy-load-image.esm.js","limit":"10 KB"}],"jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"/__mocks__/fileMock.js","\\.(css|less)$":"identity-obj-proxy"}},"devDependencies":{"@babel/core":"^7.16.7","@babel/node":"^7.16.7","@babel/preset-env":"^7.16.7","@next/eslint-plugin-next":"^12.0.7","@size-limit/preset-small-lib":"^7.0.5","@storybook/addon-essentials":"^6.4.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.4.9","@storybook/addons":"^6.4.9","@storybook/react":"^6.4.9","@types/node":"^17.0.5","@types/react":"^17.0.38","@types/react-dom":"^17.0.11","@typescript-eslint/eslint-plugin":"^5.8.1","@typescript-eslint/parser":"^5.8.1","babel-eslint":"^10.1.0","babel-loader":"^8.2.3","babel-plugin-import":"^1.13.3","babel-plugin-styled-components":"^2.0.2","css-loader":"^6.5.1","eslint":"^8.5.0","eslint-config-next":"^12.0.7","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.28.0","husky":"^7.0.4","identity-obj-proxy":"^3.0.0","lint-staged":"^12.1.4","postcss":"^8.4.5","prettier":"^2.5.1","react":"^17.0.2","react-dom":"^17.0.2","react-is":"^17.0.2","rollup-plugin-postcss":"^4.0.2","size-limit":"^7.0.5","tsdx":"^0.14.1","tslib":"^2.3.1","typescript":"^4.4.4"},"gitHead":"34db886e60588a2f6a627c4ba3c77416d3f14ec6","_id":"@codemantion/lazy-load-image@0.1.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-xHec0d01sFpDa1ocn783f8k54cqKmve6z/obsFCNkYH1z8aqG9NyUgZ9CNhJDKqjtiBnzvW3EYsrKaa2edQVpA==","shasum":"5958ef993debfe761d2b3eb5f4b804b72fa4ce79","tarball":"https://registry.npmjs.org/@codemantion/lazy-load-image/-/lazy-load-image-0.1.0.tgz","fileCount":11,"unpackedSize":30162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4pl4CRA9TVsSAnZWagAAcacP/1TKYfgbbaJ0MplSbBIE\nd1Drp4hpnyl3zta/w8/fHRLhqMxl8Nyv12ypYFRGl/1LjUIN9Oi/3raR/RHN\nDDu+z2/fMz/6URzcW9+xuMu6K66ky0cj8CWg+rVrYYYzna78vZVoXD36kncf\nWO+JaqMAjIMUPoJ6rS6uhbFOGMdKBNYJpOMsvwmhG+f0PKv8MOlV0qWi/wUS\nIZhh8KqY+KS5Tp6kXBbRBcKrlbPU7M3kofYbARMuOL47Zf7lvgD4lz8EmdHl\n6KomYbMcg3hbsaELdlmtvll0tanEeLLFtiuyvfktm4Ht+TE7GDiu3u88PpJH\nuGwNZzL6G8zlvPpCnZrf186deYJP31ytKqP6tjkGwWkNplGHublpl269XGX2\ngOCX7bkB1IXy41j/6HP3UtK8OK3vgYN5H88+7Tr3APXf4j+k8m/TS1il1ins\n0OHyX89AWoB8VASymzQNgTDMdIgR9oXWGGL/fV2jw20A7er6fN0wzQ5PHiv/\nU0+G2nElqExT8woPOBTa4olK/dVZJDoThmXZt5pzGYUpRa/JIPONk7tE/KX6\n6vWxmcJP5B0Kh9JDCH9gKLvB9qdyiLTsF9OKXk0vvGFM6+9xBJP5ai9a27fW\n+4AMhnrAOFoBSZijCLVtK7Vp6WO5Vf7kXVxf9Ld3hBx/W5nta8L6wU+TcW8X\nzFIm\r\n=GwAO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4cZI3pTFTingRx5tPSlEEQdrI/58oZsrd1sK1WRm1JwIhAJiF/Ofk/XOw62R/WTc5DBz3H4ts7AVMUYLwhCdnJJ7t"}]},"_npmUser":{"name":"akashmdev","email":"mohapatra.akash99@gmail.com"},"directories":{},"maintainers":[{"name":"akashmdev","email":"mohapatra.akash99@gmail.com"},{"name":"santanup","email":"sahoosantanu92@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lazy-load-image_0.1.0_1642240376480_0.8231148920078553"},"_hasShrinkwrap":false}},"time":{"created":"2022-01-15T09:52:56.422Z","0.1.0":"2022-01-15T09:52:56.681Z","modified":"2022-04-05T00:03:33.894Z"},"maintainers":[{"name":"akashmdev","email":"mohapatra.akash99@gmail.com"},{"name":"santanup","email":"sahoosantanu92@gmail.com"}],"description":"A simple and lightweight React Component to lazy load images","homepage":"https://github.com/codemantion/lazy-load-image","repository":{"type":"git","url":"git+https://github.com/codemantion/lazy-load-image.git"},"author":{"name":"Akash Mohapatra","email":"mohapatra.akash99@gmail.com"},"bugs":{"url":"https://github.com/codemantion/lazy-load-image/issues"},"license":"MIT","readme":"
\n\n

\n \n \"Tests\n \n \n \"Issues\"\n \n \n \"GitHub\n \n

\n\n\n
\n
\n \n \"Logo\"\n \n\n

React Lazy Load Image

\n\n

\n An simple React Component to lazy load image\n
\n Install\n ·\n Report Bug\n ·\n Request Feature\n

\n
\n\n\n\n
\n Table of Contents\n
    \n
  1. \n About The Project\n
    2. \n
  2. Installation
    3. \n
  3. LazyImage Usage
    4. \n
  4. Props
    5. \n
  5. Global override
    6. \n
\n
\n\n\n\n\n## About the project\n\nA simple and lightweight React Component to lazy load images\n\n

(back to top)

\n\n\n\n\n## Installation\n\nInstallalation\n* npm\n ```sh\n npm install @codemantion/lazy-load-image\n ```\n* yarn\n ```sh\n yarn add @codemantion/lazy-load-image\n ```\n\n\n## LazyImage Usage\n\n ```javascript\nimport React from 'react';\nimport LazyImage from '@codemantion/lazy-load-image';\n \nconst MyComponent = () => (\n \n \n \n);\n ```\n\n### Props\n\n| Prop | Type | Required | Default | Description |\n|:-------|:---------|:---------|:--------|:----------------------------------------------------------------------------------------|\n| src | `string` | `true` | | The image source. It can either pass a base64 object or URl can directly be used. |\n| width | `number` | | 200 | Image Default width. You can pass a number (i.e. 200) or a string (i.e. '200px'). |\n| height | `number` | | 200 | Image Default height. You can pass a number (i.e. 200) or a string (i.e. '200px'). |\n| alt | `string` | | 'N/A' | Alternative text if the image doesn't render. |\n| style | `object` | | { } | Element Inline Style. You can simply pass the css attribute inside the style attribute. |\n\n### Global override\n\nYou can pass parameters to apply on all the LazyImage components globally.\n\n```javascript\nimport { overRideConfig } from '@codemantion/lazy-load-image';\n```\n\nTo enable Server side rendering\n```javascript\noverRideConfig({ ssr: true });\n```\n\n### Global override Props\n\n| Prop | Type | Required | Default | Description |\n|:-----|:----------|:---------|:--------|:---------------------------------------------|\n| ssr | `boolean` | | `false` | This will enable server side rendering(SSR). |\n","readmeFilename":"README.md"}