@futurejj/react-native-visibility-sensor 1.4.1 → 1.4.3
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 +6 -1
- package/package.json +6 -5
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @futurejj/react-native-visibility-sensor
|
|
2
2
|
|
|
3
|
-
🔍 Component visibility sensor wrapper to sense whether or not a component is in viewport with configurable inset thresholds.
|
|
3
|
+
🔍 Component visibility sensor wrapper to sense whether or not a component is in viewport with configurable inset thresholds & percent visibility callback.
|
|
4
4
|
|
|
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
|
|
|
@@ -8,7 +8,12 @@
|
|
|
8
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
|
+
## Use Cases
|
|
11
12
|
|
|
13
|
+
- **Lazy Loading**: Load images/content only when visible to optimize performance in feeds, galleries, charts or webviews.
|
|
14
|
+
- **Scroll Animations**: Trigger animations (e.g., fade-ins, slides) for components entering the viewport.
|
|
15
|
+
- **Analytics Tracking**: Log impressions for ads/banners when visible for a set duration or percentage.
|
|
16
|
+
- **Dynamic UI & Optimization**: Pause/resume videos, cleanup out of screen components or timers based on component visibility in feeds or carousels.
|
|
12
17
|
|
|
13
18
|
## Installation
|
|
14
19
|
|
package/package.json
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@futurejj/react-native-visibility-sensor",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.3",
|
|
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",
|
|
7
7
|
"types": "lib/typescript/index.d.ts",
|
|
8
8
|
"react-native": "src/index",
|
|
9
9
|
"source": "src/index",
|
|
10
|
-
"private": false,
|
|
11
10
|
"files": [
|
|
12
11
|
"src",
|
|
13
12
|
"lib",
|
|
@@ -33,8 +32,7 @@
|
|
|
33
32
|
"lint": "eslint \"**/*.{js,ts,tsx}\"",
|
|
34
33
|
"prepack": "bob build",
|
|
35
34
|
"release": "release-it",
|
|
36
|
-
"example": "yarn
|
|
37
|
-
"bootstrap": "yarn example && yarn install"
|
|
35
|
+
"example": "yarn workspace @futurejj/react-native-visibility-sensor-example"
|
|
38
36
|
},
|
|
39
37
|
"keywords": [
|
|
40
38
|
"react-native",
|
|
@@ -94,10 +92,13 @@
|
|
|
94
92
|
"react": "*",
|
|
95
93
|
"react-native": "*"
|
|
96
94
|
},
|
|
95
|
+
"workspaces": [
|
|
96
|
+
"example"
|
|
97
|
+
],
|
|
97
98
|
"engines": {
|
|
98
99
|
"node": ">=18"
|
|
99
100
|
},
|
|
100
|
-
"packageManager": "yarn@
|
|
101
|
+
"packageManager": "yarn@4.9.4",
|
|
101
102
|
"jest": {
|
|
102
103
|
"preset": "react-native",
|
|
103
104
|
"modulePathIgnorePatterns": [
|