New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
react-useonview
Advanced tools
react-useonview - npm Package Compare versions
| /// <reference types="react" /> | ||
| /** | ||
| * @param doSth - function triggered when HTML element has been scrolled in to view | ||
| * @param options - set fullView:false | true to decided whether the full object shall have been scrolled into view until the funciton is triggered | ||
| * @param condition - condition that is triggered on view height chance/scroll use it to stop calling doSth when it has been called once | ||
| * | ||
| * @returns viewTrigger - a useRef<HTMLElement>() ref | ||
| */ | ||
| declare const useOnView: (doSth: () => void, fullView?: boolean | undefined) => import("react").MutableRefObject<HTMLElement | undefined>; | ||
| export default useOnView; |
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| var react_1 = require("react"); | ||
| /** | ||
| * @param doSth - function triggered when HTML element has been scrolled in to view | ||
| * @param options - set fullView:false | true to decided whether the full object shall have been scrolled into view until the funciton is triggered | ||
| * @param condition - condition that is triggered on view height chance/scroll use it to stop calling doSth when it has been called once | ||
| * | ||
| * @returns viewTrigger - a useRef<HTMLElement>() ref | ||
| */ | ||
| var useOnView = function (doSth, fullView) { | ||
| var viewTrigger = react_1.useRef(); | ||
| react_1.useEffect(function () { | ||
| var func = function (_event) { | ||
| if (viewTrigger.current) { | ||
| var pageHeightLocation = window.innerHeight + window.pageYOffset; | ||
| var objectPageHeight = calcHeight(viewTrigger.current, fullView); | ||
| if (objectPageHeight <= pageHeightLocation) { | ||
| doSth(); | ||
| } | ||
| } | ||
| }; | ||
| window.addEventListener('scroll', func); | ||
| return function () { return window.removeEventListener('scroll', func); }; | ||
| }, [doSth]); | ||
| return viewTrigger; | ||
| }; | ||
| function calcHeight(obj, fullView) { | ||
| var top = obj.offsetTop; | ||
| if (fullView) { | ||
| top += obj.clientHeight; | ||
| } | ||
| while (obj.offsetParent) { | ||
| obj = obj.offsetParent; | ||
| top += obj.offsetTop; | ||
| } | ||
| return top; | ||
| } | ||
| exports.default = useOnView; |
| /// <reference types="react" /> | ||
| /** | ||
| * @param doSth - function triggered when HTML element has been scrolled in to view | ||
| * @param options - set fullView:false | true to decided whether the full object shall have been scrolled into view until the funciton is triggered | ||
| * @param condition - condition that is triggered on view height chance/scroll use it to stop calling doSth when it has been called once | ||
| * | ||
| * @returns viewTrigger - a useRef<HTMLElement>() ref | ||
| */ | ||
| declare const useOnView: (doSth: () => void, fullView?: boolean | undefined) => import("react").MutableRefObject<HTMLElement | undefined>; | ||
| export default useOnView; |
| import { useEffect, useRef } from 'react'; | ||
| /** | ||
| * @param doSth - function triggered when HTML element has been scrolled in to view | ||
| * @param options - set fullView:false | true to decided whether the full object shall have been scrolled into view until the funciton is triggered | ||
| * @param condition - condition that is triggered on view height chance/scroll use it to stop calling doSth when it has been called once | ||
| * | ||
| * @returns viewTrigger - a useRef<HTMLElement>() ref | ||
| */ | ||
| var useOnView = function (doSth, fullView) { | ||
| var viewTrigger = useRef(); | ||
| useEffect(function () { | ||
| var func = function (_event) { | ||
| if (viewTrigger.current) { | ||
| var pageHeightLocation = window.innerHeight + window.pageYOffset; | ||
| var objectPageHeight = calcHeight(viewTrigger.current, fullView); | ||
| if (objectPageHeight <= pageHeightLocation) { | ||
| doSth(); | ||
| } | ||
| } | ||
| }; | ||
| window.addEventListener('scroll', func); | ||
| return function () { return window.removeEventListener('scroll', func); }; | ||
| }, [doSth]); | ||
| return viewTrigger; | ||
| }; | ||
| function calcHeight(obj, fullView) { | ||
| var top = obj.offsetTop; | ||
| if (fullView) { | ||
| top += obj.clientHeight; | ||
| } | ||
| while (obj.offsetParent) { | ||
| obj = obj.offsetParent; | ||
| top += obj.offsetTop; | ||
| } | ||
| return top; | ||
| } | ||
| export default useOnView; |
+19
-43
| { | ||
| "name": "react-useonview", | ||
| "version": "1.1.3", | ||
| "version": "1.2.0", | ||
| "description": "A react hook that returns a ref and does sth. when the element attached to that ref is scrolled into view.", | ||
| "author": "JustinHorn", | ||
| "main": "./lib/cjs/index.js", | ||
| "module": "./lib/esm/index.js", | ||
| "types": "./lib/esm/index.d.ts", | ||
| "author": "Justin Horn", | ||
| "license": "MIT", | ||
| "repository": "JustinHorn/react-useonview", | ||
| "main": "dist/index.js", | ||
| "module": "dist/index.modern.js", | ||
| "source": "src/index.js", | ||
| "engines": { | ||
| "node": ">=10" | ||
| }, | ||
| "files": [ | ||
| "/lib" | ||
| ], | ||
| "scripts": { | ||
| "build": "microbundle-crl --no-compress --format modern,cjs", | ||
| "start": "microbundle-crl watch --no-compress --format modern,cjs", | ||
| "prepare": "run-s build", | ||
| "test": "run-s test:unit test:lint test:build", | ||
| "test:build": "run-s build", | ||
| "test:lint": "eslint .", | ||
| "test:unit": "cross-env CI=1 react-scripts test --env=jsdom", | ||
| "test:watch": "react-scripts test --env=jsdom", | ||
| "predeploy": "cd example && yarn install && yarn run build", | ||
| "deploy": "gh-pages -d example/build" | ||
| "build": "yarn build:esm && yarn build:cjs", | ||
| "build:esm": "tsc", | ||
| "build:cjs": "tsc --module commonjs --outDir lib/cjs" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/react": "^17.0.4", | ||
| "@types/react-dom": "^17.0.3", | ||
| "typescript": "^4.2.4" | ||
| }, | ||
| "keywords": [ | ||
@@ -32,28 +31,5 @@ "react", | ||
| "peerDependencies": { | ||
| "react": "^16.0.0" | ||
| "react":">=16.8" | ||
| }, | ||
| "devDependencies": { | ||
| "babel-eslint": "^10.0.3", | ||
| "cross-env": "^7.0.2", | ||
| "eslint": "^6.8.0", | ||
| "eslint-config-prettier": "^6.7.0", | ||
| "eslint-config-standard": "^14.1.0", | ||
| "eslint-config-standard-react": "^9.2.0", | ||
| "eslint-plugin-import": "^2.18.2", | ||
| "eslint-plugin-node": "^11.0.0", | ||
| "eslint-plugin-prettier": "^3.1.1", | ||
| "eslint-plugin-promise": "^4.2.1", | ||
| "eslint-plugin-react": "^7.17.0", | ||
| "eslint-plugin-standard": "^4.0.1", | ||
| "gh-pages": "^2.2.0", | ||
| "microbundle-crl": "^0.13.10", | ||
| "npm-run-all": "^4.1.5", | ||
| "prettier": "^2.0.4", | ||
| "react": "^16.13.1", | ||
| "react-dom": "^16.13.1", | ||
| "react-scripts": "^3.4.1" | ||
| }, | ||
| "files": [ | ||
| "dist" | ||
| ] | ||
| "dependencies": {} | ||
| } |
+12
-64
@@ -7,2 +7,4 @@ # react-useonview | ||
| A react hook to trigger afunction when an component is scrolled into view. The given function will also be triggered on every subsequent scroll. So maybe add a closure to prevent this. | ||
| ## Install | ||
@@ -23,10 +25,10 @@ | ||
| ```jsx | ||
| import React, { Component } from 'react' | ||
| import React, { Component } from 'react'; | ||
| import useOnView from 'react-useonview' | ||
| import useOnView from 'react-useonview'; | ||
| const App = () => { | ||
| const [visible, setVisible] = useState(false) | ||
| const [visible, setVisible] = useState(false); | ||
| const trigger = useOnView(() => setVisible(true)) | ||
| const trigger = useOnView(() => setVisible(true)); | ||
@@ -43,4 +45,4 @@ return ( | ||
| </div> | ||
| ) | ||
| } | ||
| ); | ||
| }; | ||
| ``` | ||
@@ -58,7 +60,6 @@ | ||
| | Parameter in order | Description | | ||
| | ------------------ | ------------------------------------------------------------------------------------------------------------------- | | ||
| | doSth | function that is executed when ref-element scrolled in or past view | | ||
| | options | json object for options | | ||
| | condition | function that is passed objectPageHeight and pageHeightLocation. Its boolish return can hold the execution of doSth | | ||
| | Parameter in order | Description | | ||
| | ------------------ | ------------------------------------------------------------------- | | ||
| | doSth | function that is executed when ref-element scrolled in or past view | | ||
| | fullView | should the object be in fullview to trigger doSth | | ||
@@ -74,54 +75,1 @@ ### options | ||
| MIT © [JustinHorn](https://github.com/JustinHorn) | ||
| ## whole code | ||
| ```jsx | ||
| import { useEffect, useRef } from 'react' | ||
| const useOnView = ( | ||
| doSth, | ||
| options = {}, | ||
| condition = () => { | ||
| return true | ||
| } | ||
| ) => { | ||
| const viewTrigger = useRef() | ||
| useEffect(() => { | ||
| const func = function (e) { | ||
| if (viewTrigger.current) { | ||
| const pageHeightLocation = window.innerHeight + window.pageYOffset | ||
| const objectPageHeight = calcHeight(viewTrigger.current, options) | ||
| if ( | ||
| objectPageHeight <= pageHeightLocation && | ||
| condition(objectPageHeight, pageHeightLocation) | ||
| ) { | ||
| doSth() | ||
| } | ||
| } | ||
| } | ||
| window.addEventListener('scroll', func) | ||
| return () => window.removeEventListener('scroll', func) | ||
| }, [doSth]) | ||
| return viewTrigger | ||
| } | ||
| function calcHeight(obj, options) { | ||
| let top = obj.offsetTop | ||
| if (options.fullView) { | ||
| top += obj.clientHeight | ||
| } | ||
| while (obj.offsetParent) { | ||
| obj = obj.offsetParent | ||
| top += obj.offsetTop | ||
| } | ||
| return top | ||
| } | ||
| export default useOnView | ||
| ``` |
| /* add css module styles here (optional) */ | ||
| ._styles-module__test__3ybTi { | ||
| margin: 2em; | ||
| padding: 0.5em; | ||
| border: 2px solid #000; | ||
| font-size: 2em; | ||
| text-align: center; | ||
| } |
| var react = require('react'); | ||
| var useOnView = function useOnView(doSth, options, condition) { | ||
| if (options === void 0) { | ||
| options = {}; | ||
| } | ||
| if (condition === void 0) { | ||
| condition = function condition() { | ||
| return true; | ||
| }; | ||
| } | ||
| var viewTrigger = react.useRef(); | ||
| react.useEffect(function () { | ||
| var func = function func(e) { | ||
| if (viewTrigger.current) { | ||
| var pageHeightLocation = window.innerHeight + window.pageYOffset; | ||
| var objectPageHeight = calcHeight(viewTrigger.current, options); | ||
| if (objectPageHeight <= pageHeightLocation && condition(objectPageHeight, pageHeightLocation)) { | ||
| doSth(); | ||
| } | ||
| } | ||
| }; | ||
| window.addEventListener('scroll', func); | ||
| return function () { | ||
| return window.removeEventListener('scroll', func); | ||
| }; | ||
| }, [doSth]); | ||
| return viewTrigger; | ||
| }; | ||
| function calcHeight(obj, options) { | ||
| var top = obj.offsetTop; | ||
| if (options.fullView) { | ||
| top += obj.clientHeight; | ||
| } | ||
| while (obj.offsetParent) { | ||
| obj = obj.offsetParent; | ||
| top += obj.offsetTop; | ||
| } | ||
| return top; | ||
| } | ||
| module.exports = useOnView; | ||
| //# sourceMappingURL=index.js.map |
| {"version":3,"file":"index.js","sources":["../src/index.js"],"sourcesContent":["import { useEffect, useRef } from 'react'\r\n\r\nconst useOnView = (\r\n doSth,\r\n options = {},\r\n condition = () => {\r\n return true\r\n }\r\n) => {\r\n const viewTrigger = useRef()\r\n\r\n useEffect(() => {\r\n const func = function (e) {\r\n if (viewTrigger.current) {\r\n const pageHeightLocation = window.innerHeight + window.pageYOffset\r\n const objectPageHeight = calcHeight(viewTrigger.current, options)\r\n\r\n if (\r\n objectPageHeight <= pageHeightLocation &&\r\n condition(objectPageHeight, pageHeightLocation)\r\n ) {\r\n doSth()\r\n }\r\n }\r\n }\r\n\r\n window.addEventListener('scroll', func)\r\n return () => window.removeEventListener('scroll', func)\r\n }, [doSth])\r\n\r\n return viewTrigger\r\n}\r\n\r\nfunction calcHeight(obj, options) {\r\n let top = obj.offsetTop\r\n\r\n if (options.fullView) {\r\n top += obj.clientHeight\r\n }\r\n\r\n while (obj.offsetParent) {\r\n obj = obj.offsetParent\r\n top += obj.offsetTop\r\n }\r\n return top\r\n}\r\n\r\nexport default useOnView\r\n"],"names":["useOnView","doSth","options","condition","viewTrigger","useRef","useEffect","func","e","current","pageHeightLocation","window","innerHeight","pageYOffset","objectPageHeight","calcHeight","addEventListener","removeEventListener","obj","top","offsetTop","fullView","clientHeight","offsetParent"],"mappings":";;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAChBC,KADgB,EAEhBC,OAFgB,EAGhBC,SAHgB,EAMb;AAAA,MAJHD,OAIG;AAJHA,IAAAA,OAIG,GAJO,EAIP;AAAA;;AAAA,MAHHC,SAGG;AAHHA,IAAAA,SAGG,GAHS,qBAAM;AAChB,aAAO,IAAP;AACD,KACE;AAAA;;AACH,MAAMC,WAAW,GAAGC,YAAM,EAA1B;AAEAC,EAAAA,eAAS,CAAC,YAAM;AACd,QAAMC,IAAI,GAAG,SAAPA,IAAO,CAAUC,CAAV,EAAa;AACxB,UAAIJ,WAAW,CAACK,OAAhB,EAAyB;AACvB,YAAMC,kBAAkB,GAAGC,MAAM,CAACC,WAAP,GAAqBD,MAAM,CAACE,WAAvD;AACA,YAAMC,gBAAgB,GAAGC,UAAU,CAACX,WAAW,CAACK,OAAb,EAAsBP,OAAtB,CAAnC;;AAEA,YACEY,gBAAgB,IAAIJ,kBAApB,IACAP,SAAS,CAACW,gBAAD,EAAmBJ,kBAAnB,CAFX,EAGE;AACAT,UAAAA,KAAK;AACN;AACF;AACF,KAZD;;AAcAU,IAAAA,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCT,IAAlC;AACA,WAAO;AAAA,aAAMI,MAAM,CAACM,mBAAP,CAA2B,QAA3B,EAAqCV,IAArC,CAAN;AAAA,KAAP;AACD,GAjBQ,EAiBN,CAACN,KAAD,CAjBM,CAAT;AAmBA,SAAOG,WAAP;AACD,CA7BD;;AA+BA,SAASW,UAAT,CAAoBG,GAApB,EAAyBhB,OAAzB,EAAkC;AAChC,MAAIiB,GAAG,GAAGD,GAAG,CAACE,SAAd;;AAEA,MAAIlB,OAAO,CAACmB,QAAZ,EAAsB;AACpBF,IAAAA,GAAG,IAAID,GAAG,CAACI,YAAX;AACD;;AAED,SAAOJ,GAAG,CAACK,YAAX,EAAyB;AACvBL,IAAAA,GAAG,GAAGA,GAAG,CAACK,YAAV;AACAJ,IAAAA,GAAG,IAAID,GAAG,CAACE,SAAX;AACD;;AACD,SAAOD,GAAP;AACD;;;;"} |
| import { useRef, useEffect } from 'react'; | ||
| var useOnView = function useOnView(doSth, options, condition) { | ||
| if (options === void 0) { | ||
| options = {}; | ||
| } | ||
| if (condition === void 0) { | ||
| condition = function condition() { | ||
| return true; | ||
| }; | ||
| } | ||
| var viewTrigger = useRef(); | ||
| useEffect(function () { | ||
| var func = function func(e) { | ||
| if (viewTrigger.current) { | ||
| var pageHeightLocation = window.innerHeight + window.pageYOffset; | ||
| var objectPageHeight = calcHeight(viewTrigger.current, options); | ||
| if (objectPageHeight <= pageHeightLocation && condition(objectPageHeight, pageHeightLocation)) { | ||
| doSth(); | ||
| } | ||
| } | ||
| }; | ||
| window.addEventListener('scroll', func); | ||
| return function () { | ||
| return window.removeEventListener('scroll', func); | ||
| }; | ||
| }, [doSth]); | ||
| return viewTrigger; | ||
| }; | ||
| function calcHeight(obj, options) { | ||
| var top = obj.offsetTop; | ||
| if (options.fullView) { | ||
| top += obj.clientHeight; | ||
| } | ||
| while (obj.offsetParent) { | ||
| obj = obj.offsetParent; | ||
| top += obj.offsetTop; | ||
| } | ||
| return top; | ||
| } | ||
| export default useOnView; | ||
| //# sourceMappingURL=index.modern.js.map |
| {"version":3,"file":"index.modern.js","sources":["../src/index.js"],"sourcesContent":["import { useEffect, useRef } from 'react'\r\n\r\nconst useOnView = (\r\n doSth,\r\n options = {},\r\n condition = () => {\r\n return true\r\n }\r\n) => {\r\n const viewTrigger = useRef()\r\n\r\n useEffect(() => {\r\n const func = function (e) {\r\n if (viewTrigger.current) {\r\n const pageHeightLocation = window.innerHeight + window.pageYOffset\r\n const objectPageHeight = calcHeight(viewTrigger.current, options)\r\n\r\n if (\r\n objectPageHeight <= pageHeightLocation &&\r\n condition(objectPageHeight, pageHeightLocation)\r\n ) {\r\n doSth()\r\n }\r\n }\r\n }\r\n\r\n window.addEventListener('scroll', func)\r\n return () => window.removeEventListener('scroll', func)\r\n }, [doSth])\r\n\r\n return viewTrigger\r\n}\r\n\r\nfunction calcHeight(obj, options) {\r\n let top = obj.offsetTop\r\n\r\n if (options.fullView) {\r\n top += obj.clientHeight\r\n }\r\n\r\n while (obj.offsetParent) {\r\n obj = obj.offsetParent\r\n top += obj.offsetTop\r\n }\r\n return top\r\n}\r\n\r\nexport default useOnView\r\n"],"names":["useOnView","doSth","options","condition","viewTrigger","useRef","useEffect","func","e","current","pageHeightLocation","window","innerHeight","pageYOffset","objectPageHeight","calcHeight","addEventListener","removeEventListener","obj","top","offsetTop","fullView","clientHeight","offsetParent"],"mappings":";;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAChBC,KADgB,EAEhBC,OAFgB,EAGhBC,SAHgB,EAMb;AAAA,MAJHD,OAIG;AAJHA,IAAAA,OAIG,GAJO,EAIP;AAAA;;AAAA,MAHHC,SAGG;AAHHA,IAAAA,SAGG,GAHS,qBAAM;AAChB,aAAO,IAAP;AACD,KACE;AAAA;;AACH,MAAMC,WAAW,GAAGC,MAAM,EAA1B;AAEAC,EAAAA,SAAS,CAAC,YAAM;AACd,QAAMC,IAAI,GAAG,SAAPA,IAAO,CAAUC,CAAV,EAAa;AACxB,UAAIJ,WAAW,CAACK,OAAhB,EAAyB;AACvB,YAAMC,kBAAkB,GAAGC,MAAM,CAACC,WAAP,GAAqBD,MAAM,CAACE,WAAvD;AACA,YAAMC,gBAAgB,GAAGC,UAAU,CAACX,WAAW,CAACK,OAAb,EAAsBP,OAAtB,CAAnC;;AAEA,YACEY,gBAAgB,IAAIJ,kBAApB,IACAP,SAAS,CAACW,gBAAD,EAAmBJ,kBAAnB,CAFX,EAGE;AACAT,UAAAA,KAAK;AACN;AACF;AACF,KAZD;;AAcAU,IAAAA,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCT,IAAlC;AACA,WAAO;AAAA,aAAMI,MAAM,CAACM,mBAAP,CAA2B,QAA3B,EAAqCV,IAArC,CAAN;AAAA,KAAP;AACD,GAjBQ,EAiBN,CAACN,KAAD,CAjBM,CAAT;AAmBA,SAAOG,WAAP;AACD,CA7BD;;AA+BA,SAASW,UAAT,CAAoBG,GAApB,EAAyBhB,OAAzB,EAAkC;AAChC,MAAIiB,GAAG,GAAGD,GAAG,CAACE,SAAd;;AAEA,MAAIlB,OAAO,CAACmB,QAAZ,EAAsB;AACpBF,IAAAA,GAAG,IAAID,GAAG,CAACI,YAAX;AACD;;AAED,SAAOJ,GAAG,CAACK,YAAX,EAAyB;AACvBL,IAAAA,GAAG,GAAGA,GAAG,CAACK,YAAV;AACAJ,IAAAA,GAAG,IAAID,GAAG,CAACE,SAAX;AACD;;AACD,SAAOD,GAAP;AACD;;;;"} |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
3
-84.21%- Lines of code
96
6.67%Worsened metrics
- Total package byte prevSize
7290
-43.3%- Number of package files
6
-14.29%- Number of lines in readme file
71
-42.28%- Number of medium supply chain risk alerts
1
Infinity%No dependency changes