{"id":14957175,"url":"https://github.com/srigar/react-lazyloading","last_synced_at":"2025-05-02T07:32:22.525Z","repository":{"id":39137292,"uuid":"260727202","full_name":"srigar/react-lazyloading","owner":"srigar","description":"React Lazy Loading - Lazy load the component or anything by using Intersection Observer API","archived":false,"fork":false,"pushed_at":"2023-03-04T15:48:37.000Z","size":1002,"stargazers_count":21,"open_issues_count":16,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-07T20:05:46.733Z","etag":null,"topics":["infinite-scroll","intersection-observer","intersectionobserver-api","lazy-load-component","lazy-loading","lazyload-component","lazyload-images","react-lazy-load","react-lazy-loading","react-lazyload","reactjs","useintersectionobserver","viewport","virtual-load-component","virtual-scroll"],"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/srigar.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":"2020-05-02T16:22:33.000Z","updated_at":"2023-06-18T01:50:45.000Z","dependencies_parsed_at":"2024-09-26T18:00:31.629Z","dependency_job_id":"ac644b78-63dd-4da8-bd68-323b5fc19106","html_url":"https://github.com/srigar/react-lazyloading","commit_stats":{"total_commits":43,"total_committers":6,"mean_commits":7.166666666666667,"dds":0.6976744186046512,"last_synced_commit":"520967957130fe2ece3af4981208b30fc2aa406e"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srigar%2Freact-lazyloading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srigar%2Freact-lazyloading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srigar%2Freact-lazyloading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srigar%2Freact-lazyloading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/srigar","download_url":"https://codeload.github.com/srigar/react-lazyloading/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224305842,"owners_count":17289446,"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":["infinite-scroll","intersection-observer","intersectionobserver-api","lazy-load-component","lazy-loading","lazyload-component","lazyload-images","react-lazy-load","react-lazy-loading","react-lazyload","reactjs","useintersectionobserver","viewport","virtual-load-component","virtual-scroll"],"created_at":"2024-09-24T13:14:17.575Z","updated_at":"2024-11-12T16:04:18.075Z","avatar_url":"https://github.com/srigar.png","language":"JavaScript","readme":"# REACT LAZY LOAD \n\n![Version](https://img.shields.io/npm/v/react-observer-api?style=for-the-badge) ![License](https://img.shields.io/npm/l/react-observer-api?style=for-the-badge) ![Size](https://img.shields.io/bundlephobia/minzip/react-observer-api?style=for-the-badge)\n\n**React Lazy Loading** - It is easy to integrate with React to Lazyload components, Images, etc. It will monitor element and tell you when element enters into the viewport. So that can perform any operation when the component in viewport and initial load will get reduce. Implementing \"infinite scrolling\" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages.  \nInternally used [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)\n\n💥💥💥 **React library for Multiselect Dropdown. [Check it Out](https://github.com/srigar/multiselect-react-dropdown)** 💥💥💥\n\n## Features\n* 🎧 **Hooks or Component** - With ```useVisibilityHook``` it's easier to monitor elements and perform any operations.\n* 🔥 **Performance** - No multiple listener for scroll, resize, etc.\n* 🔦 **Bundle** - Light weight, ~3.5kb\n* 🎁 **Features** - ```forceVisible```, ```forceCheck``` to manually perform operations.\n* 💥 **Memory optimization** - Observer will disconnect once component reached viewport/unmount\n\n\n## Installation\n\nReact Lazy Load requires React v16.8 or later.\n```\nnpm install --save react-observer-api\n```\n\n## Usage\n### 1. Using Hook\n```isVisible``` will be true once DOM is visible in the viewport.  \n```setElement``` need to pass it to the ref as shown below.  \n```jsx\nimport { useVisibilityHook } from 'react-observer-api';\n\nexport default () =\u003e {\n    const { setElement, isVisible } = useVisibilityHook();\n\n    useEffect(() =\u003e {\n        if (isVisible) {\n            ...Logics/API call can trigger by watching isVisible property\n        }\n    }, [isVisible])\n\n    return {\n        \u003cdiv ref={setElement}\u003e\n            {isVisible \u0026\u0026 (\n                \u003c\u003e\n                    ...Component need to render goes here....\n                \u003c\u003e\n            )}\n        \u003c/div\u003e\n    }\n}\n```\n\n#### Config Options - Optional\n\nIt allow to pass config options as param (optional). \n\n```js\n{\n    root: null,\n    rootMargin: '0px',\n    threshold: 1.0,\n    always: false\n}\n```\n\nFor more details about options and usage, [Click here](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_concepts_and_usage) \n\n```jsx\nimport { useVisibilityHook } from 'react-observer-api';\n\nexport default () =\u003e {\n    const { setElement, isVisible } = useVisibilityHook({\n        threshold: 0.5,\n        rootMargin: '100px',\n        always: false\n    });\n    ...\n}\n```\n\n#### Always Observe\n\nFor some cases, you may want to continue to observe the dom node as it enters and exits the viewport. In this scenario, passing ```always: true``` in the config will enable this.\n\n```jsx\nuseVisibilityHook({ always: true });\n\n\u003cLazyLoad config={{ always: true }}\u003e\n```\n\n#### Force Visible\n\nFor some case, based on condition/logic may need to show the dom before it reaches to viewport. In that scenario, by calling ```forceVisible()``` will load the dom.\n\n\n```jsx\nimport { useVisibilityHook } from 'react-observer-api';\n\nexport default () =\u003e {\n    const { setElement, isVisible, forceVisible } = useVisibilityHook();\n\n    useEffect(() =\u003e {\n        forceVisible(); // isVisible become true, by manually calling this method.\n    }, [])\n    \n    return {\n        \u003cdiv ref={setElement}\u003e\n            {isVisible \u0026\u0026 (\n                \u003c\u003e\n                    ...Component need to render goes here....\n                \u003c\u003e\n            )}\n        \u003c/div\u003e\n    }\n}\n```\n\n### 2. Using Component\n\nThe above same can achieved through Component as well. Need to wrap ```LazyLoad``` on top of the component for lazyloading\n\n```jsx\nimport { LazyLoad } from 'react-observer-api';\n\nexport default () =\u003e {\n    \n    return {\n        \u003cLazyLoad\u003e\n            \u003c\u003e...Component goes here....\u003c/\u003e\n        \u003c/LazyLoad\u003e\n    }\n}\n```\n\n#### Optional Props\n| prop        | Type | Default  | Description |\n| ------------- |-----| -----| ----------- |\n| options      | object | { root: null, threshold: 0.25, rootMargin: '-10px', always: false } | [Click for more usage about options](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_concepts_and_usage)|\n| as     | string      |   div | Wrapper element can be change by passing valid tag name. Ex: span / p / div |\n| style | object     |    {} | Custom CSS for wrapper element|\n| forceVisible | boolean     |    false | Passing true to render dom without waiting to reach the viewport|\n\n#### Example\n\n```jsx\nimport { LazyLoad } from 'react-observer-api';\n\nexport default () =\u003e {\n    const style = {\n        padding: 10\n    };\n    return {\n        \u003cLazyLoad as=\"span\" style={style} forceVisible\u003e\n            \u003c\u003e...Component goes here....\u003c/\u003e\n        \u003c/LazyLoad\u003e\n    }\n}\n```\n\n## Note\nFor IE support, need to add [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill)\n\nYou can import the polyfill directly or use a service like polyfill.io to add it when needed.\n```\nnpm i intersection-observer\n```\nThen import it in your app:\n```\nimport 'intersection-observer'\n```\n\nIf you are using Webpack (or similar) you could use dynamic imports, to load the Polyfill only if needed. A basic implementation could look something like this:\n\n```\n    /**\n    * Do feature detection, to figure out which polyfills needs to be imported.\n    **/\n    async function loadPolyfills() {\n        if (typeof window.IntersectionObserver === 'undefined') {\n            await import('intersection-observer')\n        }\n    }\n\n```\n\n## Licence\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrigar%2Freact-lazyloading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsrigar%2Freact-lazyloading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrigar%2Freact-lazyloading/lists"}