{"id":13422370,"url":"https://github.com/joshwnj/react-visibility-sensor","last_synced_at":"2025-04-29T18:34:37.313Z","repository":{"id":20540715,"uuid":"23820175","full_name":"joshwnj/react-visibility-sensor","owner":"joshwnj","description":"Sensor component for React that notifies you when it goes in or out of the window viewport.","archived":false,"fork":false,"pushed_at":"2024-04-24T19:31:59.000Z","size":807,"stargazers_count":2326,"open_issues_count":83,"forks_count":197,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-04-19T16:49:18.929Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joshwnj.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2014-09-09T05:08:14.000Z","updated_at":"2025-04-14T11:55:01.000Z","dependencies_parsed_at":"2024-06-18T11:07:50.237Z","dependency_job_id":"243234fe-8e66-45a1-84a8-2227300b9783","html_url":"https://github.com/joshwnj/react-visibility-sensor","commit_stats":{"total_commits":208,"total_committers":35,"mean_commits":5.942857142857143,"dds":0.375,"last_synced_commit":"b32ab6336c036f6d02b681d4cef65a0cecd38994"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshwnj%2Freact-visibility-sensor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshwnj%2Freact-visibility-sensor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshwnj%2Freact-visibility-sensor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshwnj%2Freact-visibility-sensor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joshwnj","download_url":"https://codeload.github.com/joshwnj/react-visibility-sensor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251560773,"owners_count":21609261,"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-07-30T23:00:42.933Z","updated_at":"2025-04-29T18:34:37.290Z","avatar_url":"https://github.com/joshwnj.png","language":"JavaScript","funding_links":[],"categories":["UI Utilities","Uncategorized","UI Utilites","React","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["Reporter","Uncategorized","React Components"],"readme":"React Visibility Sensor\n====\n\n[![Build Status](https://secure.travis-ci.org/joshwnj/react-visibility-sensor.png)](http://travis-ci.org/joshwnj/react-visibility-sensor)\n\nSensor component for React that notifies you when it goes in or out of the window viewport.\n\nSponsored by [X-Team](https://x-team.com)\n\nInstall\n----\n\n`npm install react-visibility-sensor`\n\n### Including the script directly\n\nUseful if you want to use with bower, or in a plain old `\u003cscript\u003e` tag.\n\nIn this case, make sure that `React` and `ReactDOM` are already loaded and globally accessible.\n\n- Plain: \u003chttps://unpkg.com/react-visibility-sensor@5.0.1/dist/visibility-sensor.js\u003e\n- Minified \u003chttps://unpkg.com/react-visibility-sensor@5.0.1/dist/visibility-sensor.min.js\u003e\n\nTake a look at the [umd example](./example-umd/) to see this in action\n\nExample\n----\n\n[View an example on codesandbox](https://codesandbox.io/s/p73kyx9zpm)\n\nOr if you'd like to try building an example yourself locally, here's another:\n\n[View the example](https://joshwnj.github.io/react-visibility-sensor/)\n\nTo run the example locally:\n\n- `npm run build-example`\n- open `example/index.html` in a browser\n\nGeneral usage goes something like:\n\n```js\nconst VisibilitySensor = require('react-visibility-sensor');\n\nfunction onChange (isVisible) {\n  console.log('Element is now %s', isVisible ? 'visible' : 'hidden');\n}\n\nfunction MyComponent (props) {\n  return (\n    \u003cVisibilitySensor onChange={onChange}\u003e\n      \u003cdiv\u003e...content goes here...\u003c/div\u003e\n    \u003c/VisibilitySensor\u003e\n  );\n}\n```\n\nYou can also pass a child function, which can be convenient if you don't need to store the visibility anywhere:\n\n```js\nfunction MyComponent (props) {\n  return (\n    \u003cVisibilitySensor\u003e\n      {({isVisible}) =\u003e\n        \u003cdiv\u003eI am {isVisible ? 'visible' : 'invisible'}\u003c/div\u003e\n      }\n    \u003c/VisibilitySensor\u003e\n  );\n}\n```\n\nProps\n----\n\n- `onChange`: callback for whenever the element changes from being within the window viewport or not. Function is called with 1 argument `(isVisible: boolean)`\n- `active`: (default `true`) boolean flag for enabling / disabling the sensor.  When `active !== true` the sensor will not fire the `onChange` callback.\n- `partialVisibility`: (default `false`) consider element visible if only part of it is visible. Also possible values are - 'top', 'right', 'bottom', 'left' - in case it's needed to detect when one of these become visible explicitly.\n- `offset`: (default `{}`) with offset you can define amount of px from one side when the visibility should already change. So in example setting `offset={{top:10}}` means that the visibility changes hidden when there is less than 10px to top of the viewport. Offset works along with `partialVisibility`\n- `minTopValue`: (default `0`) consider element visible if only part of it is visible and a minimum amount of pixels could be set, so if at least 100px are in viewport, we mark element as visible.\n- `intervalCheck`: (default `true`) when this is true, it gives you the possibility to check if the element is in view even if it wasn't because of a user scroll\n- `intervalDelay`: (default `100`) integer, number of milliseconds between checking the element's position in relation the the window viewport. Making this number too low will have a negative impact on performance.\n- `scrollCheck`: (default: `false`) by making this true, the scroll listener is enabled.\n- `scrollDelay`: (default: `250`) is the debounce rate at which the check is triggered. Ex: 250ms after the user stopped scrolling.\n- `scrollThrottle`: (default: `-1`) by specifying a value \u003e -1, you are enabling throttle instead of the delay to trigger checks on scroll event. Throttle supercedes delay.\n- `resizeCheck`: (default: `false`) by making this true, the resize listener is enabled. Resize listener only listens to the window.\n- `resizeDelay`: (default: `250`) is the debounce rate at which the check is triggered. Ex: 250ms after the user stopped resizing.\n- `resizeThrottle`: (default: `-1`) by specifying a value \u003e -1, you are enabling throttle instead of the delay to trigger checks on resize event. Throttle supercedes delay.\n- `containment`: (optional) element to use as a viewport when checking visibility. Default behaviour is to use the browser window as viewport.\n- `delayedCall`: (default `false`) if is set to true, wont execute on page load ( prevents react apps triggering elements as visible before styles are loaded )\n- `children`: can be a React element or a function.  If you provide a function, it will be called with 1 argument `{isVisible: ?boolean, visibilityRect: Object}`\n\nIt's possible to use both `intervalCheck` and `scrollCheck` together. This means you can detect most visibility changes quickly with `scrollCheck`, and an `intervalCheck` with a higher `intervalDelay` will act as a fallback for other visibility events, such as resize of a container.\n\nThanks\n----\n\nSpecial thanks to [contributors](https://github.com/joshwnj/react-visibility-sensor/graphs/contributors)\n\nLicense\n----\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshwnj%2Freact-visibility-sensor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoshwnj%2Freact-visibility-sensor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshwnj%2Freact-visibility-sensor/lists"}