{"id":13421863,"url":"https://github.com/twobin/react-lazyload","last_synced_at":"2025-05-14T07:08:32.438Z","repository":{"id":36040530,"uuid":"40337690","full_name":"twobin/react-lazyload","owner":"twobin","description":"Lazy load your component, image or anything matters the performance.","archived":false,"fork":false,"pushed_at":"2024-04-01T07:12:01.000Z","size":2008,"stargazers_count":5903,"open_issues_count":162,"forks_count":490,"subscribers_count":49,"default_branch":"master","last_synced_at":"2025-05-13T03:53:38.676Z","etag":null,"topics":["lazyload","react"],"latest_commit_sha":null,"homepage":"","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/twobin.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-08-07T02:49:25.000Z","updated_at":"2025-05-10T19:35:04.000Z","dependencies_parsed_at":"2023-02-16T17:35:27.217Z","dependency_job_id":"41bd333b-0697-4e06-bff8-bfc3815f62e2","html_url":"https://github.com/twobin/react-lazyload","commit_stats":{"total_commits":226,"total_committers":44,"mean_commits":5.136363636363637,"dds":0.4424778761061947,"last_synced_commit":"f1faffda816180f39d3ff8cf3d9c2060f8d9d623"},"previous_names":["jasonslyvia/react-lazyload"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twobin%2Freact-lazyload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twobin%2Freact-lazyload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twobin%2Freact-lazyload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twobin%2Freact-lazyload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twobin","download_url":"https://codeload.github.com/twobin/react-lazyload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254092574,"owners_count":22013289,"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":["lazyload","react"],"created_at":"2024-07-30T23:00:33.086Z","updated_at":"2025-05-14T07:08:32.420Z","avatar_url":"https://github.com/twobin.png","language":"JavaScript","funding_links":[],"categories":["Performance","JavaScript","React","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["UI","React Components"],"readme":"# Note\n\nThis project is now currently maintained by \n[@ameerthehacker](https://github.com/ameerthehacker), please reach out to him on any issues or help.\n\n----\n\n# react-lazyload [![Build Status](https://travis-ci.org/twobin/react-lazyload.svg)](https://travis-ci.org/twobin/react-lazyload) [![npm version](https://badge.fury.io/js/react-lazyload.svg)](http://badge.fury.io/js/react-lazyload) [![Coverage Status](https://coveralls.io/repos/github/jasonslyvia/react-lazyload/badge.svg?branch=master)](https://coveralls.io/github/jasonslyvia/react-lazyload?branch=master) [![npm downloads](https://img.shields.io/npm/dm/react-lazyload.svg)](https://www.npmjs.com/package/react-lazyload)\n\nLazyload your Components, Images or anything matters the performance.\n\n[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/react-lazyload?tab=posts)\n\n[Demo](//twobin.github.io/react-lazyload/examples/)\n\n## Why it's better\n\n - Take performance in mind, only 2 event listeners for all lazy-loaded components\n - Support both `one-time lazy load` and `continuous lazy load` mode\n - `scroll` / `resize` event handler is throttled so you won't suffer frequent update, you can switch to debounce mode too\n - Decorator supported\n - Server Side Rendering friendly\n - Thoroughly tested\n\n## Installation\n\n\u003e 2.0.0 is finally out, read [Upgrade Guide](https://github.com/twobin/react-lazyload/wiki/Upgrade-Guide), it's almost painless to upgrade!\n\u003e 3.0.0 fixes the findDomNode warning through usage of React ref, and the following are the changes you need to be aware of\n\n* Now we have an extra div wrapping the lazy loaded component for the React ref to work \n* We can understand that it is an extra DOM node, and we are working to optimize that if possible\n* It might break your UI or snapshot tests based on your usage\n* To customize the styling to the extra div please refer [here](#classNamePrefix)\n* Found any other problem, please feel free to leave a comment over [here](https://github.com/twobin/react-lazyload/issues/310)\n\n```\n$ npm install --save react-lazyload\n```\n\n## Usage\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport LazyLoad from 'react-lazyload';\nimport MyComponent from './MyComponent';\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv className=\"list\"\u003e\n      \u003cLazyLoad height={200}\u003e\n        \u003cimg src=\"tiger.jpg\" /\u003e /*\n                                  Lazy loading images is supported out of box,\n                                  no extra config needed, set `height` for better\n                                  experience\n                                 */\n      \u003c/LazyLoad\u003e\n      \u003cLazyLoad height={200} once \u003e\n                                /* Once this component is loaded, LazyLoad will\n                                 not care about it anymore, set this to `true`\n                                 if you're concerned about improving performance */\n        \u003cMyComponent /\u003e\n      \u003c/LazyLoad\u003e\n      \u003cLazyLoad height={200} offset={100}\u003e\n                              /* This component will be loaded when it's top\n                                 edge is 100px from viewport. It's useful to\n                                 make user ignorant about lazy load effect. */\n        \u003cMyComponent /\u003e\n      \u003c/LazyLoad\u003e\n      \u003cLazyLoad\u003e\n        \u003cMyComponent /\u003e\n      \u003c/LazyLoad\u003e\n    \u003c/div\u003e\n  );\n};\n\nReactDOM.render(\u003cApp /\u003e, document.body);\n```\n\nIf you want to have your component lazyloaded by default, try this handy decorator:\n\n```javascript\nimport { lazyload } from 'react-lazyload';\n\n@lazyload({\n  height: 200,\n  once: true,\n  offset: 100\n})\nclass MyComponent extends React.Component {\n  render() {\n    return \u003cdiv\u003ethis component is lazyloaded by default!\u003c/div\u003e;\n  }\n}\n```\n\n## Special Tips\n\nYou should be aware that your component will only be mounted when it's visible in viewport, before that a placeholder will be rendered.\n\nSo you can safely send request in your component's `componentDidMount` without worrying about performance loss or add some pretty entering effects, see this [demo](https://twobin.github.io/react-lazyload/examples/#/fadein) for more detail.\n\n## Props\n\n### children\n\nType: Node Default: undefined\n\n**NOTICE**\nOnly one child is allowed to be passed.\n\n### scrollContainer\n\nType: String/DOM node Default: undefined\n\nPass a query selector string or DOM node. LazyLoad will attach to the window object's scroll events if no container is passed.\n\n### height\n\nType: Number/String Default: undefined\n\nIn the first round of render, LazyLoad will render a placeholder for your component if no placeholder is provided and measure if this component is visible. Set `height` properly will make LazyLoad calculate more precisely. The value can be number or string like `'100%'`. You can also use css to set the height of the placeholder instead of using `height`.\n\n### once\n\nType: Bool Default: false\n\nOnce the lazy loaded component is loaded, do not detect scroll/resize event anymore. Useful for images or simple components.\n\n### offset\n\nType: Number/Array(Number) Default: 0\n\nSay if you want to preload a component even if it's 100px below the viewport (user have to scroll 100px more to see this component), you can set `offset` props to `100`. On the other hand, if you want to delay loading a component even if it's top edge has already appeared at viewport, set `offset` to negative number.\n\nLibrary supports horizontal lazy load out of the box. So when you provide this prop with number like `100` it will automatically set left edge offset to `100` and top edge to `100`;\n\nIf you provide this prop with array like `[100, 200]`, it will set left edge offset to `100` and top offset to `200`.\n\n### scroll\n\nType: Bool Default: true\n\nListen and react to scroll event.\n\n### resize\n\nType: Bool Default: false\n\nRespond to `resize` event, set it to `true` if you do need LazyLoad listen resize event.\n\n**NOTICE** If you tend to support legacy IE, set this props carefully, refer to [this question](http://stackoverflow.com/questions/1852751/window-resize-event-firing-in-internet-explorer) for further reading.\n\n### overflow\n\nType: Bool Default: false\n\nIf lazy loading components inside a overflow container, set this to `true`. Also make sure a `position` property other than `static` has been set to your overflow container.\n\n[demo](https://twobin.github.io/react-lazyload/examples/#/overflow)\n\n### placeholder\n\nType: Any Default: undefined\n\nSpecify a placeholder for your lazy loaded component.\n\n[demo](https://twobin.github.io/react-lazyload/examples/#/placeholder)\n\n**If you provide your own placeholder, do remember add appropriate `height` or `minHeight` to your placeholder element for better lazyload performance.**\n\n### unmountIfInvisible\n\nType: Bool Default: false\n\nThe lazy loaded component is unmounted and replaced by the placeholder when it is no longer visible in the viewport.\n\n\n### debounce/throttle\n\nType: Bool / Number Default: undefined\n\nLazyload will try to use [passive event](https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md) by default to improve scroll/resize event handler's performance. If you prefer control this behaviour by yourself, you can set `debounce` or `throttle` to enable built in delay feature.\n\nIf you provide a number, that will be how many `ms` to wait; if you provide `true`, the wait time defaults to `300ms`.\n\n**NOTICE** Set `debounce` / `throttle` to all lazy loaded components unanimously, if you don't, the first occurrence is respected.\n\n[demo](https://twobin.github.io/react-lazyload/examples/#/debounce)\n\n### classNamePrefix\n\nType: String Default: `lazyload`\n\nWhile rendering, Lazyload will add some elements to the component tree in addition to the wrapped component children.\n\nThe `classNamePrefix` prop allows the user to supply their own custom class prefix to help:\n    # Avoid class conflicts on an implementing app\n    # Allow easier custom styling\n\nThese being:\n    # A wrapper div, which is present at all times (default )\n    \n### style\n\nType: Object Default: undefined\n\nSimilar to [classNamePrefix](#classNamePrefix), the `style` prop allows users to pass custom CSS styles to wrapper div. \n\n### wheel\n\n**DEPRECATED NOTICE**\nThis props is not supported anymore, try set `overflow` for lazy loading in overflow containers.\n\n## Utility\n\n### forceCheck\n\nIt is available to manually trigger checking for elements in viewport. Helpful when LazyLoad components enter the viewport without resize or scroll events, e.g. when the components' container was hidden then become visible.\n\nImport `forceCheck`:\n\n```javascript\nimport { forceCheck } from 'react-lazyload';\n```\n\nThen call the function:\n\n```javascript\nforceCheck();\n```\n\n### forceVisible\n\nForces the component to display regardless of whether the element is visible in the viewport.\n\n```javascript\nimport { forceVisible } from 'react-lazyload';\n```\n\nThen call the function:\n\n```javascript\nforceVisible();\n```\n\n## Scripts\n\n```\n$ npm run demo:watch\n$ npm run build\n```\n\n## Who should use it\n\nLet's say there is a `fixed` date picker on the page, when user picks a different date, all components displaying data should send ajax requests with new date parameter to retreive updated data, even many of them aren't visible in viewport. This makes server load furious when there are too many requests in one time.\n\nUsing `LazyLoad` component will help ease this situation by only updating components visible in viewport.\n\n## Contributors\n\n1. [lancehub](https://github.com/lancehub)\n2. [doug-wade](https://github.com/doug-wade)\n3. [ameerthehacker](https://github.com/ameerthehacker)\n\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwobin%2Freact-lazyload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwobin%2Freact-lazyload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwobin%2Freact-lazyload/lists"}