Sensor component for React that notifies you when it goes in or out of the window viewport.
Installations
npm install react-visibility-sensorDeveloper Guide
Typescript
No
Module System
CommonJS
Node Version
10.15.3
NPM Version
6.10.1
Score
87.6
Supply Chain
95.6
Quality
80.5
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
Unable to fetch Contributors
Languages
JavaScript (87.68%)
HTML (12.32%)
Developer
joshwnj
Download Statistics
Total Downloads
71,079,036
Last Day
18,084
Last Week
186,177
Last Month
903,680
Last Year
11,525,653
GitHub Statistics
2,327 Stars
263 Commits
195 Forks
25 Watching
5 Branches
31 Contributors
Bundle Size
8.10 kB
Minified
3.00 kB
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
5.1.1
Package Id
react-visibility-sensor@5.1.1
Size
196.61 kB
NPM Version
6.10.1
Node Version
10.15.3
Publised On
25 Jul 2019
Total Downloads
Cumulative downloads
Total Downloads
71,079,036
Last day
-57.4%
18,084
Compared to previous day
Last week
-14.5%
186,177
Compared to previous week
Last month
2.2%
903,680
Compared to previous month
Last year
-38.5%
11,525,653
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
React Visibility Sensor
Sensor component for React that notifies you when it goes in or out of the window viewport.
Sponsored by X-Team
Install
npm install react-visibility-sensor
Including the script directly
Useful if you want to use with bower, or in a plain old <script> tag.
In this case, make sure that React and ReactDOM are already loaded and globally accessible.
- Plain: https://unpkg.com/react-visibility-sensor@5.0.1/dist/visibility-sensor.js
- Minified https://unpkg.com/react-visibility-sensor@5.0.1/dist/visibility-sensor.min.js
Take a look at the umd example to see this in action
Example
View an example on codesandbox
Or if you'd like to try building an example yourself locally, here's another:
To run the example locally:
npm run build-example- open
example/index.htmlin a browser
General usage goes something like:
1const VisibilitySensor = require('react-visibility-sensor'); 2 3function onChange (isVisible) { 4 console.log('Element is now %s', isVisible ? 'visible' : 'hidden'); 5} 6 7function MyComponent (props) { 8 return ( 9 <VisibilitySensor onChange={onChange}> 10 <div>...content goes here...</div> 11 </VisibilitySensor> 12 ); 13}
You can also pass a child function, which can be convenient if you don't need to store the visibility anywhere:
1function MyComponent (props) { 2 return ( 3 <VisibilitySensor> 4 {({isVisible}) => 5 <div>I am {isVisible ? 'visible' : 'invisible'}</div> 6 } 7 </VisibilitySensor> 8 ); 9}
Props
onChange: callback for whenever the element changes from being within the window viewport or not. Function is called with 1 argument(isVisible: boolean)active: (defaulttrue) boolean flag for enabling / disabling the sensor. Whenactive !== truethe sensor will not fire theonChangecallback.partialVisibility: (defaultfalse) 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.offset: (default{}) with offset you can define amount of px from one side when the visibility should already change. So in example settingoffset={{top:10}}means that the visibility changes hidden when there is less than 10px to top of the viewport. Offset works along withpartialVisibilityminTopValue: (default0) 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.intervalCheck: (defaulttrue) 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 scrollintervalDelay: (default100) 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.scrollCheck: (default:false) by making this true, the scroll listener is enabled.scrollDelay: (default:250) is the debounce rate at which the check is triggered. Ex: 250ms after the user stopped scrolling.scrollThrottle: (default:-1) by specifying a value > -1, you are enabling throttle instead of the delay to trigger checks on scroll event. Throttle supercedes delay.resizeCheck: (default:false) by making this true, the resize listener is enabled. Resize listener only listens to the window.resizeDelay: (default:250) is the debounce rate at which the check is triggered. Ex: 250ms after the user stopped resizing.resizeThrottle: (default:-1) by specifying a value > -1, you are enabling throttle instead of the delay to trigger checks on resize event. Throttle supercedes delay.containment: (optional) element to use as a viewport when checking visibility. Default behaviour is to use the browser window as viewport.delayedCall: (defaultfalse) if is set to true, wont execute on page load ( prevents react apps triggering elements as visible before styles are loaded )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}
It'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.
Thanks
Special thanks to contributors
License
MIT
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 3/23 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 13 are checked with a SAST tool
Reason
75 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
- Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
- Warn: Project is vulnerable to: GHSA-2j2x-2gpw-g8fm
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-7x7c-qm48-pq9c
- Warn: Project is vulnerable to: GHSA-rc3x-jf5g-xvc5
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-82v2-mx6x-wq7q
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4
- Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-mgfv-m47x-4wqp
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5
- Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
1.9
/10
Last Scanned on 2024-12-16
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreOther packages similar to react-visibility-sensor
@types/react-visibility-sensor
TypeScript definitions for react-visibility-sensor
@rooks/use-visibility-sensor
A React Hooks package for visibility-sensor
@futurejj/react-native-visibility-sensor
A React Native wrapper to check whether a component is in the view port to track impressions and clicks
react-visibility-sensor-v2
Sensor component for React that notifies you when it goes in or out of the window viewport forked by joshwnj.