react-scroll-progress-read - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

dist/index.d.ts

@@ -7,4 +7,5 @@ import * as React from "react";
     target?: string;
+    refTarget?: React.RefObject<HTMLElement>;
 }
-declare const ScrollProgressRead: React.FC<IScrollProgressProps>;
-export default ScrollProgressRead;
+declare const _default: React.NamedExoticComponent<IScrollProgressProps>;
+export default _default;

dist/index.js

@@ -1,1 +0,1 @@
-import{useState as e,useEffect as t,createElement as o}from"react";const n=(e,t=5)=>Number(e.toFixed(t)),r=({backgroundColor:r,height:l,barColor:d,target:c})=>{const m=c?document.getElementById(c):null,[u,i]=e("0%");t(()=>(s(),window.addEventListener("scroll",s),()=>window.removeEventListener("scroll",s)),[]);const s=()=>{let e=0,t=0;const o=(()=>{let e=0;return document.documentElement&&null!==document.documentElement&&(e=document.documentElement.scrollTop),window.pageYOffset||e})();m?(e=(e=>{let t=e.offsetHeight;const o=window.getComputedStyle(e),{marginBottom:n,marginTop:r}=o;return n&&r&&(t+=parseInt(r,2)+parseInt(n,2)),t})(m)-document.documentElement.clientHeight,t=m.offsetTop):e=document.documentElement.scrollHeight-document.documentElement.clientHeight;const r=n(o-t);if(o<t&&"0%"!==u)return i("0%");if(r>e&&"100%"!==u)return i("100%");const l=n(r/e),d=`${n(100*l)}%`;i(d)};return o("div",{style:{background:r,height:l,width:"100vw"}},o("div",{style:{height:l,background:d,width:u}}))};r.defaultProps={backgroundColor:"#CCC",height:"5px",barColor:"#e91e63"};export default r;
+import{memo as e,useState as t,useEffect as n,createElement as o}from"react";const r=(e,t=5)=>Number(e.toFixed(t)),l=({backgroundColor:e,height:l,barColor:c,target:d,refTarget:u})=>{let m;const[i,s]=t("0%");n(()=>(m=d?document.getElementById(d):null,g(),window.addEventListener("scroll",g),()=>window.removeEventListener("scroll",g)),[]);const g=()=>{const e=u?u.current:m||null;let t=0,n=0;const o=(()=>{let e=0;return document.documentElement&&null!==document.documentElement&&(e=document.documentElement.scrollTop),window.pageYOffset||e})();e?(t=(e=>{let t=e.offsetHeight;const n=window.getComputedStyle(e),{marginBottom:o,marginTop:r}=n;return o&&r&&(t+=parseInt(r,2)+parseInt(o,2)),t})(e)-document.documentElement.clientHeight,n=e.offsetTop):t=document.documentElement.scrollHeight-document.documentElement.clientHeight;const l=r(o-n);if(o<n)return s("0%");if(l>t)return s("100%");const c=r(l/t),d=`${r(100*c)}%`;s(d)};return o("div",{style:{background:e,height:l,width:"100vw"}},o("div",{style:{height:l,background:c,width:i}}))};l.defaultProps={backgroundColor:"#CCC",height:"5px",barColor:"#e91e63"};export default e(l);

package.json

 {
   "name": "react-scroll-progress-read",
   "description": "Progress Bar for show position of scroll page",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "main": "./dist/index.js",
@@ -6,0 +6,0 @@ "repository": "[e-mail]:ipatate/react-scroll-progress-read.git",

README.md

@@ -37,5 +37,8 @@ ## React Component for show progress bar connected with the scroll.
 - target (string) : ID of html element
+- refTarget (React.RefObject) : reference to react element
 
 The props aren't required.
 
+if not ref target, the component use target ID and if target is undefined, the component use the document.
+
 ```jsx
@@ -52,2 +55,3 @@ import ScrollProgressRead from 'react-scroll-progress-read';
     target="read-container"
+    refTarget={refContainer}
   />
@@ -54,0 +58,0 @@ ....

No alert changes

Improved metrics

Total package byte prevSize

211153

increased by0.3%

Lines of code

357

increased by3.78%

Number of lines in readme file

60

increased by7.14%

No dependency changes