{"id":22021809,"url":"https://github.com/foo-software/react-lazy-offscreen-image","last_synced_at":"2026-04-19T15:05:58.836Z","repository":{"id":57112842,"uuid":"181367577","full_name":"foo-software/react-lazy-offscreen-image","owner":"foo-software","description":"A lazy loading React component to display a background image when in the viewport and the image is loaded.","archived":false,"fork":false,"pushed_at":"2019-06-26T13:33:42.000Z","size":38,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-09-17T15:11:10.712Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/foo-software.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-14T20:51:56.000Z","updated_at":"2019-06-26T13:33:44.000Z","dependencies_parsed_at":"2022-08-21T13:01:01.146Z","dependency_job_id":null,"html_url":"https://github.com/foo-software/react-lazy-offscreen-image","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/foo-software/react-lazy-offscreen-image","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo-software%2Freact-lazy-offscreen-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo-software%2Freact-lazy-offscreen-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo-software%2Freact-lazy-offscreen-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo-software%2Freact-lazy-offscreen-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foo-software","download_url":"https://codeload.github.com/foo-software/react-lazy-offscreen-image/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo-software%2Freact-lazy-offscreen-image/sbom","scorecard":{"id":406354,"data":{"date":"2025-08-11","repo":{"name":"github.com/foo-software/react-lazy-offscreen-image","commit":"d7be64ce17ee03bb3d3a2aed4308e5f33cfc7bdb"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.6,"checks":[{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}}]},"last_synced_at":"2025-08-18T21:22:27.478Z","repository_id":57112842,"created_at":"2025-08-18T21:22:27.479Z","updated_at":"2025-08-18T21:22:27.479Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32010969,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-30T06:15:16.940Z","updated_at":"2026-04-19T15:05:58.828Z","avatar_url":"https://github.com/foo-software.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `@foo-software/react-lazy-offscreen-image`\n\n\u003e **React Lazy Offscreen Image** exports a lazy loading React component to display a background image when in the viewport and the image is loaded. When analyzing website performance with tools like [Lighthouse](https://developers.google.com/web/tools/lighthouse/) for example, often we find an opportunity for improvement in loading images below the fold, on demand - asynchronously. [Lighthouse documentation explains the offscreen image performance metric](https://developers.google.com/web/tools/lighthouse/audits/offscreen-images) in detail. This component provides lazy loading of images as an element with a backround image, when the user has scrolled it into the browser viewport. This technique is known as \"lazy loading\".\n\n## Install\n\n\u003e npm\n\n```\nnpm install @foo-software/react-scroll-context @foo-software/react-lazy-offscreen-image\n```\n\n\u003e yarn\n\n```\nyarn add @foo-software/react-scroll-context @foo-software/react-lazy-offscreen-image\n```\n\n## Dependencies\n\n- `react@16.8`\n- [`react-scroll-context`](https://www.npmjs.com/package/@foo-software/react-scroll-context): Used to provide scroll data.\n\n## Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003cth\u003ePropType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003echildren\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eAnything that can be rendered, but typically a tree of elements. The background image will be added to the container. \u003ccode\u003echildren\u003c/code\u003e can optionally be specifid to render inside the container with the background image.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enode\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eclassName\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eAn optional custom \u003ccode\u003eclassName\u003c/code\u003e to be added to the container.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eCustomTag\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eA custom HTML tag used for the container element.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003ediv\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eimageUrl\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eThe image URL for the background image.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e--\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eScrollContext\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eA scroll \u003ccode\u003eContext\u003c/code\u003e object created by \u003ccode\u003eReact.createContext()\u003c/code\u003e. You will need to use the same context as with \u003ca href=\"https://www.npmjs.com/package/@foo-software/react-scroll-context\"\u003e\u003ccode\u003ereact-scroll-context\u003c/code\u003e\u003c/a\u003e. This component depends on `react-scroll-context` to provide scroll data.\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eobject\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e--\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Usage\n\nExample combined with [`react-scroll-context`](https://www.npmjs.com/package/@foo-software/react-scroll-context).\n\n```jsx\nimport React from 'react';\nimport { ScrollProvider } from '@foo-software/react-scroll-context';\nimport { LazyOffscreenImage } from '@foo-software/react-lazy-offscreen-image';\n\n// replace `scroll-context` any name you like.\nconst ScrollContext = React.createContext('scroll-context');\n\nconst App = () =\u003e (\n  \u003cScrollProvider\n    Context={ScrollContext}\n  \u003e\n    \u003cdiv\u003e\n      \u003ch1\u003eScroll it!\u003c/h1\u003e\n      \u003cp\u003eIpsum lorem, a lot of content here...\u003c/p\u003e\n      \u003cLazyOffscreenImage\n        imageUrl=\"http://placekitten.com/300/300\"\n        ScrollContext={ScrollContext}\n      /\u003e\n    \u003c/div\u003e\n  \u003c/ScrollProvider\u003e\n);\n```\n\n## Demo\n\nAn example using this component can be seen on [Foo's features page](https://www.foo.software/features).\n\n## Credits\n\n\u003e \u003cimg src=\"https://s3.amazonaws.com/foo.software/images/logo-200x200.png\" width=\"100\" height=\"100\" align=\"left\" /\u003e This package was brought to you by [Foo - a website performance monitoring tool](https://www.foo.software). Create a **free account** with standard performance testing. Automatic website performance testing, uptime checks, charts showing performance metrics by day, month, and year. Foo also provides real time notifications when performance and uptime notifications when changes are detected. Users can integrate email, Slack and PagerDuty notifications.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoo-software%2Freact-lazy-offscreen-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoo-software%2Freact-lazy-offscreen-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoo-software%2Freact-lazy-offscreen-image/lists"}