{"id":15311914,"url":"https://github.com/fkhadra/react-on-screen","last_synced_at":"2025-05-16T09:05:10.906Z","repository":{"id":10363816,"uuid":"65501516","full_name":"fkhadra/react-on-screen","owner":"fkhadra","description":"Check if a react component in  the viewport","archived":false,"fork":false,"pushed_at":"2022-12-09T16:53:59.000Z","size":989,"stargazers_count":405,"open_issues_count":45,"forks_count":50,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-02T09:15:37.028Z","etag":null,"topics":["lazy-loading","react","screen","viewport","visibility"],"latest_commit_sha":null,"homepage":"https://fkhadra.github.io/react-on-screen/","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/fkhadra.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}},"created_at":"2016-08-11T21:05:26.000Z","updated_at":"2025-03-26T10:43:55.000Z","dependencies_parsed_at":"2023-01-13T15:53:58.142Z","dependency_job_id":null,"html_url":"https://github.com/fkhadra/react-on-screen","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fkhadra%2Freact-on-screen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fkhadra%2Freact-on-screen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fkhadra%2Freact-on-screen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fkhadra%2Freact-on-screen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fkhadra","download_url":"https://codeload.github.com/fkhadra/react-on-screen/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254501557,"owners_count":22081528,"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":["lazy-loading","react","screen","viewport","visibility"],"created_at":"2024-10-01T08:35:03.515Z","updated_at":"2025-05-16T09:05:05.898Z","avatar_url":"https://github.com/fkhadra.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React on screen [![npm](https://img.shields.io/npm/dt/react-on-screen.svg)]() [![npm](https://img.shields.io/npm/v/react-on-screen.svg)]() [![license](https://img.shields.io/github/license/fkhadra/react-on-screen.svg?maxAge=2592000)]() [![Coverage Status](https://coveralls.io/repos/github/fkhadra/react-on-screen/badge.svg?branch=master)](https://coveralls.io/github/fkhadra/react-on-screen?branch=master)\n\n😎 Check if your react component are visible on the screen without pain and with performance in mind 😎!\n\n![react-on-screen-demo](https://user-images.githubusercontent.com/5574267/32147681-74918d80-bceb-11e7-98d4-1cbc04b29eb4.gif)\n\n- [React on screen ![npm]() ![npm]() ![license]() ![Coverage Status](https://coveralls.io/github/fkhadra/react-on-screen?branch=master)](#react-on-screen-npm-npm-license-coverage-statushttpscoverallsiogithubfkhadrareact-on-screenbranchmaster)\n    - [Demo](#demo)\n    - [Installation](#installation)\n    - [Usage](#usage)\n        - [Simple](#simple)\n        - [Using a render props](#using-a-render-props)\n        - [Track the visibility only once](#track-the-visibility-only-once)\n        - [Defining offset](#defining-offset)\n        - [Partial visibility](#partial-visibility)\n        - [Use the html tag of your choice](#use-the-html-tag-of-your-choice)\n    - [Api](#api)\n    - [Contributions](#contributions)\n    - [License](#license)\n\n## Demo\n\nView the [demo](https://fkhadra.github.io/react-on-screen/demo-react-on-screen.html).\n\n## Installation\n\n```\n$ npm install --save react-on-screen\n$ yarn add react-on-screen\n```\n\nA UMD build is also available :\n\n```html\n\u003cscript src=\"./dist/ReactOnScreen.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n### Simple\n\n```javascript\nimport React from 'react';\nimport TrackVisibility from 'react-on-screen';\n\nconst ComponentToTrack = ({ isVisible }) =\u003e {\n    const style = {\n        background: isVisible ? 'red' : 'blue'\n    };\n    return \u003cdiv style={style}\u003eHello\u003c/div\u003e;\n}\n\nconst YourApp = () =\u003e {\n    return (\n       {/* Some Stuff */}\n        \u003cTrackVisibility\u003e\n            \u003cComponentToTrack /\u003e\n        \u003c/TrackVisibility\u003e\n       {/* Some Stuff */}\n    );\n}\n```\n\n### Using a render props\n\nYou can use a render props is you want to !\n\n```js\nconst YourApp = () =\u003e {\n    return (\n        \u003cTrackVisibility\u003e\n            {({ isVisible }) =\u003e isVisible \u0026\u0026 \u003cComponentToTrack /\u003e}\n        \u003c/TrackVisibility\u003e\n    );\n}\n```\n\n### Track the visibility only once\n\nFor many cases you may want to track the visibility only once. This can be done simply as follow :\n\n```js\nconst YourApp = () =\u003e {\n    return (\n        \u003cTrackVisibility once\u003e\n            \u003cComponentToTrack /\u003e\n        \u003c/TrackVisibility\u003e\n    );\n}\n```\n\n### Defining offset\n\nUsing `offset` props can be usefull if you want to lazy load an image for instance.\n\n```js\nconst YourApp = () =\u003e {\n    return (\n        \u003cTrackVisibility offset={1000}\u003e\n            {({ isVisible }) =\u003e isVisible ? \u003cComponentToTrack /\u003e : \u003cLoading /\u003e}\n        \u003c/TrackVisibility\u003e\n    );\n}\n```\n\n### Partial visibility\n\nYou may want to consider that a component is visible as soon as a part of the component is visible on screen. You can use the `partialVisibility` props for that.\n\n```js\nconst YourApp = () =\u003e {\n    return (\n        \u003cTrackVisibility partialVisibility\u003e\n            {({ isVisible }) =\u003e \u003cComponentToTrack /\u003e}\n        \u003c/TrackVisibility\u003e\n    );\n}\n```\n\n### Use the html tag of your choice\n\n```js\nconst YourApp = () =\u003e {\n    return (\n        \u003cTrackVisibility partialVisibility tag=\"h1\"\u003e\n            {({ isVisible }) =\u003e \u003cComponentToTrack /\u003e}\n        \u003c/TrackVisibility\u003e\n    );\n}\n```\n\n## Api\n\n|props           |type            |default|description|\n|----------------|----------------|-------|-----------|\n|once            |bool            |false|If set to true track the visibility only once and remove the event listeners|\n|throttleInterval|int             |150|Tweak the event listeners. See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)|\n|children        |React Components|  -  |Can be one or many react components|\n|style           |object          |  -  |Style attributes|\n|className       |string          |  -  |Css classes|\n|offset          |number          |  0  |Allows you to specify how far left or above of the viewport you want to set isVisible to `true`|\n|partialVisibility|bool           |false|Set isVisible to true on element as soon as any part is in the viewport|\n|tag             |string|div  |Allows specifying html tag of your choice|\n\n## Contributions\n\nAny contributions is welcome !\n\n- Develop: ``` $ yarn start ```\n- Lint : ``` $ yarn lint ```\n- Test : ``` $ yarn test ```\n- Build : ``` $ yarn build // will lint and run test before ```\n\n## License\n\nLicensed under MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffkhadra%2Freact-on-screen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffkhadra%2Freact-on-screen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffkhadra%2Freact-on-screen/lists"}