{"id":16182253,"url":"https://github.com/avraammavridis/react-intersection-visible","last_synced_at":"2025-03-16T10:31:46.535Z","repository":{"id":65373071,"uuid":"60824571","full_name":"AvraamMavridis/react-intersection-visible","owner":"AvraamMavridis","description":"HOC to track when a component enters the visible viewport.","archived":false,"fork":false,"pushed_at":"2020-05-27T06:20:06.000Z","size":12378,"stargazers_count":52,"open_issues_count":9,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-27T07:42:51.779Z","etag":null,"topics":["high-order-component","react","viewport","visible"],"latest_commit_sha":null,"homepage":"http://avraammavridis.github.io/react-intersection-visible/","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/AvraamMavridis.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2016-06-10T04:44:18.000Z","updated_at":"2024-12-18T10:52:44.000Z","dependencies_parsed_at":"2023-01-19T23:35:35.314Z","dependency_job_id":null,"html_url":"https://github.com/AvraamMavridis/react-intersection-visible","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AvraamMavridis%2Freact-intersection-visible","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AvraamMavridis%2Freact-intersection-visible/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AvraamMavridis%2Freact-intersection-visible/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AvraamMavridis%2Freact-intersection-visible/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AvraamMavridis","download_url":"https://codeload.github.com/AvraamMavridis/react-intersection-visible/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243814895,"owners_count":20352036,"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":["high-order-component","react","viewport","visible"],"created_at":"2024-10-10T06:29:56.044Z","updated_at":"2025-03-16T10:31:46.157Z","avatar_url":"https://github.com/AvraamMavridis.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-intersection-visible\nHOC-wrapper Component that helps you track when an element enters in the viewport. It uses the new [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)\nwith polyfill fallback\n\n[Demo](http://avraammavridis.github.io/react-intersection-visible/)\n\n[![Build Status](https://travis-ci.org/AvraamMavridis/react-intersection-visible.svg?branch=master)](https://travis-ci.org/AvraamMavridis/react-intersection-visible) [![Greenkeeper badge](https://badges.greenkeeper.io/AvraamMavridis/react-intersection-visible.svg)](https://greenkeeper.io/)\n\n### How to use\n\n1. Import `IntersectionVisible` hoc component\n2. Wrap your main component with the `IntersectionVisible`\n3. Provide the options and callbacks you want\n\n\n\n### Example\n\n\n```javascript\nimport React, { Component }   from 'react';\nimport ReactDOM               from 'react-dom';\nimport IntersectionVisible    from 'react-intersection-visible';\n\nclass YourComponent extends Component\n{\n\n    onHide( entries )\n    {\n        // do something\n    }\n\n    onShow( entries )\n    {\n        // do something\n    }\n\n    onIntersect( entries )\n    {\n        // do something\n    }\n\n    render(){\n        return (\u003cIntersectionVisible onIntersect={ e =\u003e this.onIntersect( e ) }\n                                     onHide={ e =\u003e this.onHide( e ) }\n                                     onShow={ e =\u003e this.onShow( e ) }\u003e\n                    \u003cdiv\u003e\n                        blah blah blah  blah blah blah  blah blah blah  blah blah\n                          blah blah blah  blah blah blah  blah blah blah\n                    \u003c/div\u003e\n                \u003c/IntersectionVisible\u003e);\n    }\n}\n\n  ```\n\n### Options:\n\n| Name        | Description\n| ------------- |-------------:|\n| onIntersect    | Function that is called when the visibility status of the element change  |\n| onHide    | Function that is called when the element becomes invisible |\n| onShow    | Function that is called when the element becomes visible  |\n| options    | Object, with the extras options supported by the IntersectionObserver API (root, rootMargin, threshold)|\n\nMore about the options [here](https://developers.google.com/web/updates/2016/04/intersectionobserver?hl=en)\n\n### Contribute\n\nAny pull-request is more than welcome :boom: :smile:\n\n### License\n\nMIT\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favraammavridis%2Freact-intersection-visible","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favraammavridis%2Freact-intersection-visible","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favraammavridis%2Freact-intersection-visible/lists"}