{"id":13429584,"url":"https://github.com/imbhargav5/rehooks-visibility-sensor","last_synced_at":"2025-03-23T00:32:52.216Z","repository":{"id":74798489,"uuid":"154815663","full_name":"imbhargav5/rehooks-visibility-sensor","owner":"imbhargav5","description":"Checks whether a Ref has scrolled into view or not.","archived":false,"fork":false,"pushed_at":"2018-11-29T15:59:36.000Z","size":219,"stargazers_count":13,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-17T16:19:41.195Z","etag":null,"topics":["hooks","react","rehooks","visibility-detection"],"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/imbhargav5.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}},"created_at":"2018-10-26T10:09:13.000Z","updated_at":"2020-04-18T00:20:29.000Z","dependencies_parsed_at":"2024-01-07T11:11:34.634Z","dependency_job_id":"1764c7d8-2322-426c-96a5-02205d28ef08","html_url":"https://github.com/imbhargav5/rehooks-visibility-sensor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imbhargav5%2Frehooks-visibility-sensor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imbhargav5%2Frehooks-visibility-sensor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imbhargav5%2Frehooks-visibility-sensor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imbhargav5%2Frehooks-visibility-sensor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imbhargav5","download_url":"https://codeload.github.com/imbhargav5/rehooks-visibility-sensor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245040235,"owners_count":20551297,"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":["hooks","react","rehooks","visibility-detection"],"created_at":"2024-07-31T02:00:42.072Z","updated_at":"2025-03-23T00:32:51.791Z","avatar_url":"https://github.com/imbhargav5.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# `@rehooks/visibility-sensor` *DEPRECATED. Moved to [@rooks/use-visibility-sensor](https://github.com/imbhargav5/rooks/tree/master/packages/visibility-sensor)*\n\n\u003e React hook for visibility sensing a ref\n\nIt checks whether an element has scrolled into view or not. A lot of the logic is taken from [react-visibility-sensor](https://github.com/joshwnj/react-visibility-sensor) and is rewritten for the hooks proposal.\n\n\u003e **Note:** This is using the new [React Hooks API Proposal](https://reactjs.org/docs/hooks-intro.html)\n\u003e which is subject to change until React 16.7 final.\n\u003e\n\u003e You'll need to install `react`, `react-dom`, etc at `^16.7.0-alpha.0`\n\n## Demo\n\n[![Image from Gyazo](https://i.gyazo.com/98634bb2a962733670d798d1e754d63e.gif)](https://gyazo.com/98634bb2a962733670d798d1e754d63e)\n\n## Install\n\n```sh\nyarn add @rehooks/visibility-sensor\n```\n\n## Usage\n\n```js\nimport useVisibilitySensor from \"@rehooks/visibility-sensor\";\n\nfunction MyComponent() {\n  const rootNode = useRef(null);\n  const { isVisible, visibilityRect } = useVisibilitySensor(rootNode, {\n    intervalCheck: false,\n    scrollCheck: true,\n    resizeCheck: true\n  });\n  return (\n    \u003cdiv ref={rootNode}\u003e\n      \u003cp\u003e\n        {isVisible ? \"Visible\" : isVisible === null ? \"Null\" : \"Not Visible\"}\n      \u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Options\n\nThe first argument of the `useVisibilitySensor` hook is a ref, the second argument is an options object. The available options are as follow:\n\n`intervalCheck: false` - Accepts `int | bool`, if an `int` is supplied, that will be the interval in `ms` and it keeps checking for visibility\n\n`partialVisibility: false` - Accepts `bool | string` : Tells the hook if partial visibility should be considered as visibility or not. Accepts `false` and directions `top`, `bottom`, `left` and `right`\n`containment: null` - A `DOMNode` element which defaults to `window`. The element relative to which visibility is checked against\n\n`scrollCheck: true` - A `bool` to determine whether to check for scroll behavior or not\n\n`scrollDebounce: 250` - The debounce ms for scroll\n\n`scrollThrottle: -1` - The throttle ms for scroll. If throttle \u003e -1, debounce is ignored.\n\n`resizeCheck: false` - A `bool` to determine whether to check for resize behavior or not\n\n`resizeDebounce: 250` - The debounce ms for resize\n\n`resizeThrottle: -1` - The throttle ms for resize. If throttle \u003e -1, debounce is ignored.\n\n`shouldCheckOnMount: true` - A `bool` which determines whether an initial check on first render should happen or not.\n\n`minTopValue: 0` - An `int` top value to determine what amount of top visibility should be considered for `visibility`\n\n## Status: Yet to be published to npm\n\n## Todo\n\n- [x] Init\n- [x] Scroll and Resize support\n- [x] Debounce and throttling\n- [x] Option to opt-out of initial check on mount\n- [x] Documentation of all options\n- [x] Tests _ WIP _\n- [ ] More examples _ WIP _\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimbhargav5%2Frehooks-visibility-sensor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimbhargav5%2Frehooks-visibility-sensor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimbhargav5%2Frehooks-visibility-sensor/lists"}