@futurejj/react-native-visibility-sensor 1.4.0-beta.2 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -20
- package/lib/commonjs/VisibilitySensor.js +27 -23
- package/lib/commonjs/VisibilitySensor.js.map +1 -1
- package/lib/module/VisibilitySensor.js +27 -23
- package/lib/module/VisibilitySensor.js.map +1 -1
- package/lib/typescript/VisibilitySensor.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/VisibilitySensor.tsx +38 -34
package/README.md
CHANGED
|
@@ -5,10 +5,11 @@
|
|
|
5
5
|
[](https://badge.fury.io/js/%40futurejj%2Freact-native-visibility-sensor) [](https://github.com/JairajJangle/react-native-visibility-sensor/blob/main/LICENSE) [](https://github.com/JairajJangle/react-native-visibility-sensor/actions/workflows/ci.yml)    [](https://github.com/JairajJangle/react-native-visibility-sensor/issues?q=is%3Aopen+is%3Aissue)  [](https://snack.expo.dev/@futurejj/react-native-visibility-sensor-example)  
|
|
6
6
|
|
|
7
7
|
<div align="center">
|
|
8
|
-
<img src="https://
|
|
8
|
+
<img src="https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExOXN4ZWs5ejdiYmZ5Zm5xaWw5YXZ5OGYwMmczcnFneXNiYW5hcDh6cCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/gEbrrDtgnoq6Fs8FNq/giphy.gif" alt="Visibility Sensor demo" style="border: 1px solid gray;" />
|
|
9
9
|
</div>
|
|
10
10
|
|
|
11
11
|
|
|
12
|
+
|
|
12
13
|
## Installation
|
|
13
14
|
|
|
14
15
|
Using yarn
|
|
@@ -27,27 +28,27 @@ npm install @futurejj/react-native-visibility-sensor
|
|
|
27
28
|
## Usage
|
|
28
29
|
|
|
29
30
|
```tsx
|
|
30
|
-
import React from 'react';
|
|
31
|
+
import React, { useState } from 'react';
|
|
31
32
|
import { ScrollView, Text } from 'react-native';
|
|
32
33
|
import { VisibilitySensor } from '@futurejj/react-native-visibility-sensor';
|
|
33
34
|
|
|
34
35
|
export default function VisibilitySensorExample() {
|
|
35
|
-
const [isVisible, setIsVisible] =
|
|
36
|
+
const [isVisible, setIsVisible] = useState(false);
|
|
36
37
|
const [percentVisible, setPercentVisible] = useState<number>(0);
|
|
37
38
|
|
|
38
39
|
return (
|
|
39
40
|
<ScrollView>
|
|
40
41
|
<VisibilitySensor
|
|
41
42
|
onChange={setIsVisible}
|
|
42
|
-
|
|
43
|
+
onPercentChange={setPercentVisible} // optional callback for % change
|
|
43
44
|
threshold={{ top: 100, bottom: 100 }}
|
|
44
45
|
style={[styles.item, { backgroundColor: isVisible ? 'green' : 'red' }]}>
|
|
45
46
|
|
|
46
47
|
{/* Visibility state */}
|
|
47
48
|
<Text>This View is currently visible? {isVisible ? 'yes' : 'no'}</Text>
|
|
48
49
|
|
|
49
|
-
|
|
50
|
-
|
|
50
|
+
{/* Percent visibility state */}
|
|
51
|
+
<Text>{`Percent visible: ${percentVisible}%`}</Text>
|
|
51
52
|
</VisibilitySensor>
|
|
52
53
|
</ScrollView>
|
|
53
54
|
);
|
|
@@ -57,14 +58,14 @@ export default function VisibilitySensorExample() {
|
|
|
57
58
|
|
|
58
59
|
`VisibilitySensorProps` extends `ViewProps` from React Native, which includes common properties for all views, such as `style`, `onLayout`, etc.
|
|
59
60
|
|
|
60
|
-
| Property
|
|
61
|
-
|
|
|
62
|
-
| onChange | (visible: boolean) => void
|
|
63
|
-
| onPercentChange | (percentVisible: number) => void
|
|
64
|
-
| disabled | boolean
|
|
65
|
-
| triggerOnce | boolean
|
|
66
|
-
| delay | number
|
|
67
|
-
| threshold | [VisibilitySensorThreshold](#visibilitysensorthreshold) | No | Defines the part of the view that must be visible for the sensor to trigger. |
|
|
61
|
+
| Property | Type | Required | Description |
|
|
62
|
+
| ----------------- | ------------------------------------------------------- | -------- | ------------------------------------------------------------ |
|
|
63
|
+
| `onChange` | `(visible: boolean) => void` | Yes | Callback function that fires when visibility changes. |
|
|
64
|
+
| `onPercentChange` | `(percentVisible: number) => void` | No | Callback function that fires when visibility % changes. |
|
|
65
|
+
| `disabled` | `boolean` | No | If `true`, disables the sensor. |
|
|
66
|
+
| `triggerOnce` | `boolean` | No | If `true`, the sensor will only trigger once. |
|
|
67
|
+
| `delay` | `number` or `undefined` | No | The delay in milliseconds before the sensor triggers. |
|
|
68
|
+
| `threshold` | [VisibilitySensorThreshold](#visibilitysensorthreshold) | No | Defines the part of the view that must be visible for the sensor to trigger. |
|
|
68
69
|
|
|
69
70
|
Additionally, all properties from `ViewProps` are also applicable.
|
|
70
71
|
|
|
@@ -72,12 +73,12 @@ Additionally, all properties from `ViewProps` are also applicable.
|
|
|
72
73
|
|
|
73
74
|
### VisibilitySensorThreshold
|
|
74
75
|
|
|
75
|
-
| Property | Type
|
|
76
|
-
| -------- |
|
|
77
|
-
| top
|
|
78
|
-
| bottom
|
|
79
|
-
| left
|
|
80
|
-
| right
|
|
76
|
+
| Property | Type | Required | Description |
|
|
77
|
+
| -------- | -------- | -------- | ------------------------------------------ |
|
|
78
|
+
| `top` | `number` | No | The top threshold value for visibility. |
|
|
79
|
+
| `bottom` | `number` | No | The bottom threshold value for visibility. |
|
|
80
|
+
| `left` | `number` | No | The left threshold value for visibility. |
|
|
81
|
+
| `right` | `number` | No | The right threshold value for visibility. |
|
|
81
82
|
|
|
82
83
|
---
|
|
83
84
|
|
|
@@ -151,37 +151,41 @@ const VisibilitySensor = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
|
151
151
|
rectDimensions.rectRight - (threshold.right || 0) >= 0; // Right edge is within the left of the window
|
|
152
152
|
|
|
153
153
|
// Calculate percent visible if callback is requested / provided
|
|
154
|
-
if (onPercentChange && rectDimensions.rectWidth > 0 && rectDimensions.rectHeight > 0
|
|
155
|
-
|
|
156
|
-
// Thresholds reduce the effective viewport
|
|
157
|
-
const viewportTop = 0 + (threshold.top || 0);
|
|
158
|
-
const viewportBottom = window.height - (threshold.bottom || 0);
|
|
159
|
-
const viewportLeft = 0 + (threshold.left || 0);
|
|
160
|
-
const viewportRight = window.width - (threshold.right || 0);
|
|
154
|
+
if (onPercentChange && rectDimensions.rectWidth > 0 && rectDimensions.rectHeight > 0) {
|
|
155
|
+
let percentVisible = 0;
|
|
161
156
|
|
|
162
|
-
//
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
157
|
+
// Don't perform % calculation if not visible for efficiency
|
|
158
|
+
if (isVisible) {
|
|
159
|
+
// Thresholds reduce the effective viewport
|
|
160
|
+
const viewportTop = 0 + (threshold.top || 0);
|
|
161
|
+
const viewportBottom = window.height - (threshold.bottom || 0);
|
|
162
|
+
const viewportLeft = 0 + (threshold.left || 0);
|
|
163
|
+
const viewportRight = window.width - (threshold.right || 0);
|
|
167
164
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
165
|
+
// Calculate the visible portion of the element within the reduced viewport
|
|
166
|
+
const visibleTop = Math.max(viewportTop, rectDimensions.rectTop);
|
|
167
|
+
const visibleBottom = Math.min(viewportBottom, rectDimensions.rectBottom);
|
|
168
|
+
const visibleLeft = Math.max(viewportLeft, rectDimensions.rectLeft);
|
|
169
|
+
const visibleRight = Math.min(viewportRight, rectDimensions.rectRight);
|
|
171
170
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
171
|
+
// Calculate visible dimensions
|
|
172
|
+
const visibleHeight = Math.max(0, visibleBottom - visibleTop);
|
|
173
|
+
const visibleWidth = Math.max(0, visibleRight - visibleLeft);
|
|
174
|
+
|
|
175
|
+
// Calculate percent visible based on actual element area
|
|
176
|
+
const visibleArea = visibleHeight * visibleWidth;
|
|
177
|
+
const totalArea = rectDimensions.rectHeight * rectDimensions.rectWidth;
|
|
178
|
+
percentVisible = totalArea > 0 ? Math.round(visibleArea / totalArea * 100) : 0;
|
|
179
|
+
} else {
|
|
180
|
+
// when !isVisible
|
|
181
|
+
percentVisible = 0; // No need to calculate, it's fully out of view, so 0%
|
|
182
|
+
}
|
|
176
183
|
|
|
177
184
|
// Only fire callback if percent has changed
|
|
178
185
|
if (lastPercentRef.current !== percentVisible) {
|
|
179
|
-
lastPercentRef.current = percentVisible;
|
|
186
|
+
lastPercentRef.current = percentVisible; // Update last reported percent
|
|
180
187
|
onPercentChange(percentVisible);
|
|
181
188
|
}
|
|
182
|
-
} else if (onPercentChange && rectDimensions.rectWidth > 0 && rectDimensions.rectHeight > 0 && !isVisible // If not visible, always report 0%
|
|
183
|
-
) {
|
|
184
|
-
onPercentChange(0);
|
|
185
189
|
}
|
|
186
190
|
if (lastValue !== isVisible) {
|
|
187
191
|
setLastValue(isVisible);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MeasurementState","useInterval","callback","delay","savedCallback","useRef","useEffect","current","undefined","id","setInterval","clearInterval","VisibilitySensor","forwardRef","props","ref","onChange","onPercentChange","disabled","triggerOnce","threshold","children","rest","useImperativeHandle","getInnerRef","localRef","window","useWindowDimensions","isMountedRef","measurementStateRef","IDLE","lastPercentRef","rectDimensions","setRectDimensions","useState","rectTop","rectBottom","rectLeft","rectRight","rectWidth","rectHeight","lastValue","setLastValue","active","setActive","measureInnerView","useCallback","MEASURING","measure","_x","_y","width","height","pageX","pageY","dimensions","MEASURED","startWatching","stopWatching","timer","setTimeout","clearTimeout","isVisible","top","bottom","left","right","viewportTop","viewportBottom","viewportLeft","viewportRight","visibleTop","Math","max","visibleBottom","min","visibleLeft","visibleRight","visibleHeight","visibleWidth","visibleArea","totalArea","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MeasurementState","useInterval","callback","delay","savedCallback","useRef","useEffect","current","undefined","id","setInterval","clearInterval","VisibilitySensor","forwardRef","props","ref","onChange","onPercentChange","disabled","triggerOnce","threshold","children","rest","useImperativeHandle","getInnerRef","localRef","window","useWindowDimensions","isMountedRef","measurementStateRef","IDLE","lastPercentRef","rectDimensions","setRectDimensions","useState","rectTop","rectBottom","rectLeft","rectRight","rectWidth","rectHeight","lastValue","setLastValue","active","setActive","measureInnerView","useCallback","MEASURING","measure","_x","_y","width","height","pageX","pageY","dimensions","MEASURED","startWatching","stopWatching","timer","setTimeout","clearTimeout","isVisible","top","bottom","left","right","percentVisible","viewportTop","viewportBottom","viewportLeft","viewportRight","visibleTop","Math","max","visibleBottom","min","visibleLeft","visibleRight","visibleHeight","visibleWidth","visibleArea","totalArea","round","jsx","View","_default","exports"],"sourceRoot":"../../src","sources":["VisibilitySensor.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -146,37 +146,41 @@ const VisibilitySensor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
146
146
|
rectDimensions.rectRight - (threshold.right || 0) >= 0; // Right edge is within the left of the window
|
|
147
147
|
|
|
148
148
|
// Calculate percent visible if callback is requested / provided
|
|
149
|
-
if (onPercentChange && rectDimensions.rectWidth > 0 && rectDimensions.rectHeight > 0
|
|
150
|
-
|
|
151
|
-
// Thresholds reduce the effective viewport
|
|
152
|
-
const viewportTop = 0 + (threshold.top || 0);
|
|
153
|
-
const viewportBottom = window.height - (threshold.bottom || 0);
|
|
154
|
-
const viewportLeft = 0 + (threshold.left || 0);
|
|
155
|
-
const viewportRight = window.width - (threshold.right || 0);
|
|
149
|
+
if (onPercentChange && rectDimensions.rectWidth > 0 && rectDimensions.rectHeight > 0) {
|
|
150
|
+
let percentVisible = 0;
|
|
156
151
|
|
|
157
|
-
//
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
152
|
+
// Don't perform % calculation if not visible for efficiency
|
|
153
|
+
if (isVisible) {
|
|
154
|
+
// Thresholds reduce the effective viewport
|
|
155
|
+
const viewportTop = 0 + (threshold.top || 0);
|
|
156
|
+
const viewportBottom = window.height - (threshold.bottom || 0);
|
|
157
|
+
const viewportLeft = 0 + (threshold.left || 0);
|
|
158
|
+
const viewportRight = window.width - (threshold.right || 0);
|
|
162
159
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
160
|
+
// Calculate the visible portion of the element within the reduced viewport
|
|
161
|
+
const visibleTop = Math.max(viewportTop, rectDimensions.rectTop);
|
|
162
|
+
const visibleBottom = Math.min(viewportBottom, rectDimensions.rectBottom);
|
|
163
|
+
const visibleLeft = Math.max(viewportLeft, rectDimensions.rectLeft);
|
|
164
|
+
const visibleRight = Math.min(viewportRight, rectDimensions.rectRight);
|
|
166
165
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
166
|
+
// Calculate visible dimensions
|
|
167
|
+
const visibleHeight = Math.max(0, visibleBottom - visibleTop);
|
|
168
|
+
const visibleWidth = Math.max(0, visibleRight - visibleLeft);
|
|
169
|
+
|
|
170
|
+
// Calculate percent visible based on actual element area
|
|
171
|
+
const visibleArea = visibleHeight * visibleWidth;
|
|
172
|
+
const totalArea = rectDimensions.rectHeight * rectDimensions.rectWidth;
|
|
173
|
+
percentVisible = totalArea > 0 ? Math.round(visibleArea / totalArea * 100) : 0;
|
|
174
|
+
} else {
|
|
175
|
+
// when !isVisible
|
|
176
|
+
percentVisible = 0; // No need to calculate, it's fully out of view, so 0%
|
|
177
|
+
}
|
|
171
178
|
|
|
172
179
|
// Only fire callback if percent has changed
|
|
173
180
|
if (lastPercentRef.current !== percentVisible) {
|
|
174
|
-
lastPercentRef.current = percentVisible;
|
|
181
|
+
lastPercentRef.current = percentVisible; // Update last reported percent
|
|
175
182
|
onPercentChange(percentVisible);
|
|
176
183
|
}
|
|
177
|
-
} else if (onPercentChange && rectDimensions.rectWidth > 0 && rectDimensions.rectHeight > 0 && !isVisible // If not visible, always report 0%
|
|
178
|
-
) {
|
|
179
|
-
onPercentChange(0);
|
|
180
184
|
}
|
|
181
185
|
if (lastValue !== isVisible) {
|
|
182
186
|
setLastValue(isVisible);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useEffect","useRef","useState","forwardRef","useImperativeHandle","useWindowDimensions","View","jsx","_jsx","MeasurementState","useInterval","callback","delay","savedCallback","current","undefined","id","setInterval","clearInterval","VisibilitySensor","props","ref","onChange","onPercentChange","disabled","triggerOnce","threshold","children","rest","getInnerRef","localRef","window","isMountedRef","measurementStateRef","IDLE","lastPercentRef","rectDimensions","setRectDimensions","rectTop","rectBottom","rectLeft","rectRight","rectWidth","rectHeight","lastValue","setLastValue","active","setActive","measureInnerView","MEASURING","measure","_x","_y","width","height","pageX","pageY","dimensions","MEASURED","startWatching","stopWatching","timer","setTimeout","clearTimeout","isVisible","top","bottom","left","right","viewportTop","viewportBottom","viewportLeft","viewportRight","visibleTop","Math","max","visibleBottom","min","visibleLeft","visibleRight","visibleHeight","visibleWidth","visibleArea","totalArea","
|
|
1
|
+
{"version":3,"names":["React","useCallback","useEffect","useRef","useState","forwardRef","useImperativeHandle","useWindowDimensions","View","jsx","_jsx","MeasurementState","useInterval","callback","delay","savedCallback","current","undefined","id","setInterval","clearInterval","VisibilitySensor","props","ref","onChange","onPercentChange","disabled","triggerOnce","threshold","children","rest","getInnerRef","localRef","window","isMountedRef","measurementStateRef","IDLE","lastPercentRef","rectDimensions","setRectDimensions","rectTop","rectBottom","rectLeft","rectRight","rectWidth","rectHeight","lastValue","setLastValue","active","setActive","measureInnerView","MEASURING","measure","_x","_y","width","height","pageX","pageY","dimensions","MEASURED","startWatching","stopWatching","timer","setTimeout","clearTimeout","isVisible","top","bottom","left","right","percentVisible","viewportTop","viewportBottom","viewportLeft","viewportRight","visibleTop","Math","max","visibleBottom","min","visibleLeft","visibleRight","visibleHeight","visibleWidth","visibleArea","totalArea","round"],"sourceRoot":"../../src","sources":["VisibilitySensor.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VisibilitySensor.d.ts","sourceRoot":"","sources":["../../src/VisibilitySensor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EACV,mBAAmB,EACnB,qBAAqB,EAEtB,MAAM,0BAA0B,CAAC;AAyBlC,QAAA,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"VisibilitySensor.d.ts","sourceRoot":"","sources":["../../src/VisibilitySensor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EACV,mBAAmB,EACnB,qBAAqB,EAEtB,MAAM,0BAA0B,CAAC;AAyBlC,QAAA,MAAM,gBAAgB,mGAgPrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@futurejj/react-native-visibility-sensor",
|
|
3
|
-
"version": "1.4.0
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "A React Native wrapper to check whether a component is in the view port to track impressions and clicks",
|
|
5
5
|
"main": "lib/commonjs/index",
|
|
6
6
|
"module": "lib/module/index",
|
package/src/VisibilitySensor.tsx
CHANGED
|
@@ -205,46 +205,50 @@ const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>(
|
|
|
205
205
|
if (
|
|
206
206
|
onPercentChange &&
|
|
207
207
|
rectDimensions.rectWidth > 0 &&
|
|
208
|
-
rectDimensions.rectHeight > 0
|
|
209
|
-
isVisible // Don't perform % calculation if not visible for efficiency
|
|
208
|
+
rectDimensions.rectHeight > 0
|
|
210
209
|
) {
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
210
|
+
let percentVisible = 0;
|
|
211
|
+
|
|
212
|
+
// Don't perform % calculation if not visible for efficiency
|
|
213
|
+
if (isVisible) {
|
|
214
|
+
// Thresholds reduce the effective viewport
|
|
215
|
+
const viewportTop = 0 + (threshold.top || 0);
|
|
216
|
+
const viewportBottom = window.height - (threshold.bottom || 0);
|
|
217
|
+
const viewportLeft = 0 + (threshold.left || 0);
|
|
218
|
+
const viewportRight = window.width - (threshold.right || 0);
|
|
219
|
+
|
|
220
|
+
// Calculate the visible portion of the element within the reduced viewport
|
|
221
|
+
const visibleTop = Math.max(viewportTop, rectDimensions.rectTop);
|
|
222
|
+
const visibleBottom = Math.min(
|
|
223
|
+
viewportBottom,
|
|
224
|
+
rectDimensions.rectBottom
|
|
225
|
+
);
|
|
226
|
+
const visibleLeft = Math.max(viewportLeft, rectDimensions.rectLeft);
|
|
227
|
+
const visibleRight = Math.min(
|
|
228
|
+
viewportRight,
|
|
229
|
+
rectDimensions.rectRight
|
|
230
|
+
);
|
|
231
|
+
|
|
232
|
+
// Calculate visible dimensions
|
|
233
|
+
const visibleHeight = Math.max(0, visibleBottom - visibleTop);
|
|
234
|
+
const visibleWidth = Math.max(0, visibleRight - visibleLeft);
|
|
235
|
+
|
|
236
|
+
// Calculate percent visible based on actual element area
|
|
237
|
+
const visibleArea = visibleHeight * visibleWidth;
|
|
238
|
+
const totalArea =
|
|
239
|
+
rectDimensions.rectHeight * rectDimensions.rectWidth;
|
|
240
|
+
percentVisible =
|
|
241
|
+
totalArea > 0 ? Math.round((visibleArea / totalArea) * 100) : 0;
|
|
242
|
+
} else {
|
|
243
|
+
// when !isVisible
|
|
244
|
+
percentVisible = 0; // No need to calculate, it's fully out of view, so 0%
|
|
245
|
+
}
|
|
235
246
|
|
|
236
247
|
// Only fire callback if percent has changed
|
|
237
248
|
if (lastPercentRef.current !== percentVisible) {
|
|
238
|
-
lastPercentRef.current = percentVisible;
|
|
249
|
+
lastPercentRef.current = percentVisible; // Update last reported percent
|
|
239
250
|
onPercentChange(percentVisible);
|
|
240
251
|
}
|
|
241
|
-
} else if (
|
|
242
|
-
onPercentChange &&
|
|
243
|
-
rectDimensions.rectWidth > 0 &&
|
|
244
|
-
rectDimensions.rectHeight > 0 &&
|
|
245
|
-
!isVisible // If not visible, always report 0%
|
|
246
|
-
) {
|
|
247
|
-
onPercentChange(0);
|
|
248
252
|
}
|
|
249
253
|
|
|
250
254
|
if (lastValue !== isVisible) {
|