{"id":16473462,"url":"https://github.com/kingrayhan/reactjs-visibility","last_synced_at":"2025-03-21T06:32:16.376Z","repository":{"id":57348350,"uuid":"393862855","full_name":"kingRayhan/reactjs-visibility","owner":"kingRayhan","description":"Detect when an element is becoming visible or hidden on the page. ","archived":false,"fork":false,"pushed_at":"2023-12-23T11:03:23.000Z","size":4273,"stargazers_count":26,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-04-24T23:01:52.342Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/reactjs-visibility","language":"TypeScript","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/kingRayhan.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":"2021-08-08T05:04:49.000Z","updated_at":"2023-12-07T11:23:32.000Z","dependencies_parsed_at":"2024-10-11T12:27:04.100Z","dependency_job_id":"95afb101-719f-41d7-b7f7-bbdd441b8564","html_url":"https://github.com/kingRayhan/reactjs-visibility","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingRayhan%2Freactjs-visibility","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingRayhan%2Freactjs-visibility/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingRayhan%2Freactjs-visibility/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingRayhan%2Freactjs-visibility/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kingRayhan","download_url":"https://codeload.github.com/kingRayhan/reactjs-visibility/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244751647,"owners_count":20504243,"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":[],"created_at":"2024-10-11T12:27:02.046Z","updated_at":"2025-03-21T06:32:15.879Z","avatar_url":"https://github.com/kingRayhan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Visibility\n\nDetect when an element is becoming visible or hidden on the page.\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"react-visibility.jpg\"/\u003e\n\u003c/div\u003e\n\n[![GitHub Pages deploy](https://github.com/kingRayhan/reactjs-visibility/actions/workflows/gh-pages-publish.yml/badge.svg)](https://github.com/kingRayhan/reactjs-visibility/actions/workflows/gh-pages-publish.yml)\n[![Publish to NPM](https://github.com/kingRayhan/reactjs-visibility/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/kingRayhan/reactjs-visibility/actions/workflows/npm-publish.yml)\n\n![npm bundle size](https://img.shields.io/bundlephobia/min/reactjs-visibility)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/reactjs-visibility)\n[![npm downloads](https://img.shields.io/npm/dt/@kingrayhan/react-onscreen)](https://www.npmjs.com/package/reactjs-visibility)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/kingrayhan/reactjs-visibility/blob/master/LICENSE)\n\n## [See in action](https://kingrayhan.github.io/reactjs-visibility/)\n\n### Installation\n\n```bash\nnpm install reactjs-visibility\n```\n\n\u003e ⚠️ This plugin uses the Intersection Observer API that is not supported in every browser (currently supported in Edge, Firefox and Chrome). You need to include a polyfill to make it work on incompatible browsers.\n\n### Detech visibility with `\u003cVisibilityObserver\u003e` component\n\n```jsx\nimport React from \"react\";\nimport { VisibilityObserver } from \"reactjs-visibility\";\n\nconst App = () =\u003e {\n  const handleChangeVisibility = (visible) =\u003e {\n    if (visible) {\n      alert(\"I am now visible\");\n    }\n  };\n\n  const options = {\n    rootMargin: \"200px\",\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1 style={{ fontSize: 500 }}\u003e\n        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nam\n        exercitationem sit alias perferendis, odit ex optio iure assumenda!\n        Voluptatum, nulla. Assumenda iusto nesciunt adipisci totam repellat id\n        excepturi minima.\n      \u003c/h1\u003e\n\n      \u003cVisibilityObserver\n        onChangeVisibility={handleChangeVisibility}\n        options={options}\n      \u003e\n        Loadmore...\n      \u003c/VisibilityObserver\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### Detech visibility with `useVisibility()` Hook\n\n**Example 1**\n\n```jsx\nimport React from \"react\";\nimport { useVisibility } from \"reactjs-visibility\";\n\nconst App = () =\u003e {\n  const handleChangeVisibility = (visible) =\u003e {\n    if (visible) {\n      alert(\"I am now visible\");\n    }\n  };\n\n  const options = {};\n\n  const { ref, visible } = useVisibility({\n    onChangeVisibility: handleChangeVisibility,\n    options,\n  });\n\n  console.log(visible);\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1 style={{ fontSize: 50 }}\u003e\n        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nam\n        exercitationem sit alias perferendis, odit ex optio iure assumenda!\n        Voluptatum, nulla. Assumenda iusto nesciunt adipisci totam repellat id\n        excepturi minima.\n      \u003c/h1\u003e\n\n      \u003cdiv ref={ref}\u003eLoadmore...\u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n**Example 2**\n\n```jsx\nimport React from \"react\";\nimport { useVisibility } from \"reactjs-visibility\";\n\nconst App = () =\u003e {\n  const { ref, visible } = useVisibility();\n\n  useEffect(() =\u003e {\n    if (visible) {\n      alert(\"I am now visible\");\n    }\n  }, [visible]);\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1 style={{ fontSize: 50 }}\u003e\n        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nam\n        exercitationem sit alias perferendis, odit ex optio iure assumenda!\n        Voluptatum, nulla. Assumenda iusto nesciunt adipisci totam repellat id\n        excepturi minima.\n      \u003c/h1\u003e\n\n      \u003cdiv ref={ref}\u003eLoadmore...\u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## Options\n\nIt's possible to pass the [IntersectionObserver `options` object](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#Parameters) using the `intersection`\n\n### License\n\nMIT license, Copyright (c) KingRayhan. For more information see `LICENSE`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkingrayhan%2Freactjs-visibility","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkingrayhan%2Freactjs-visibility","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkingrayhan%2Freactjs-visibility/lists"}