simple-parallax-js-beta - npm Package Compare versions

Comparing version 6.0.9 to 6.0.10

dist/react/index.d.ts

@@ -0,1 +1,3 @@
+/// <reference types="react" />
+
 import { default as default_2 } from 'react';
@@ -9,3 +11,3 @@
 declare interface SimpleParallaxProps {
-    src: string;
+    src?: string;
     alt?: string;
@@ -18,4 +20,5 @@ delay?: number;
     maxTransition?: number | null;
+    children?: React.ReactNode;
 }
 
 export { }

dist/react/simpleParallax.es.js

@@ -1,3 +0,3 @@
-import E, { useState as a, useRef as H, useCallback as k, useEffect as m } from "react";
-class d {
+import E, { useState as o, useRef as k, useCallback as T, useEffect as m } from "react";
+class p {
   constructor() {
@@ -7,3 +7,3 @@ this.callbacks = /* @__PURE__ */ new Set(), this.animationFrameId = null;
   static getInstance() {
-    return d.instance || (d.instance = new d()), d.instance;
+    return p.instance || (p.instance = new p()), p.instance;
   }
@@ -26,23 +26,23 @@ register(t) {
 }
-const F = d.getInstance(), _ = (e) => {
-  const [t, n] = a(0), [o, i] = a(!1), s = H(null), r = k(() => {
+const C = p.getInstance(), q = (e) => {
+  const [t, n] = o(0), [c, a] = o(!1), s = k(null), r = T(() => {
     s.current && n(s.current.height);
   }, []);
   return m(() => {
-    const l = () => {
-      i(!0), r();
-    }, u = s.current;
-    return u && (u.complete ? l() : u.addEventListener("load", l)), window.addEventListener("resize", r), () => {
-      u && u.removeEventListener("load", l), window.removeEventListener("resize", r);
+    const u = () => {
+      a(!0), r();
+    }, i = s.current;
+    return i && (i.complete ? u() : i.addEventListener("load", u)), window.addEventListener("resize", r), () => {
+      i && i.removeEventListener("load", u), window.removeEventListener("resize", r);
     };
-  }, [e, r]), [s, t, o];
-}, M = (e, t) => e * t - e, A = (e, t) => Math.ceil(e / 100 * t - t / 2), j = (e, t) => {
-  const { top: n, height: o } = e, i = -o, s = t;
-  if (n < i)
+  }, [e, r]), [s, t, c];
+}, B = (e, t) => e * t - e, G = (e, t) => Math.ceil(e / 100 * t - t / 2), O = (e, t) => {
+  const { top: n, height: c } = e, a = -c, s = t;
+  if (n < a)
     return 0;
   if (n > s)
     return 100;
-  const r = (n - i) / (s - i) * 100;
+  const r = (n - a) / (s - a) * 100;
   return Math.min(Math.max(r, 0), 100);
-}, q = (e, t) => {
+}, W = (e, t) => {
   switch (t) {
@@ -68,4 +68,4 @@ case "up":
   }
-}, B = () => {
-  const [e, t] = a(null);
+}, Y = () => {
+  const [e, t] = o(null);
   return m(() => {
@@ -80,35 +80,35 @@ const n = () => {
   }, []), e;
-}, G = ({
+}, D = ({
   isLoaded: e,
   imageHeight: t,
   scale: n,
-  boundingClientRect: o,
-  orientation: i,
+  boundingClientRect: c,
+  orientation: a,
   maxTransition: s
 }) => {
-  const [r, l] = a(0), [u, g] = a(0), [h, b] = a(""), [p, x] = a(0), w = B();
+  const [r, u] = o(0), [i, x] = o(0), [h, w] = o(""), [d, I] = o(0), g = Y();
   return m(() => {
     if (!e)
       return;
-    const c = M(t, n);
-    l(c);
+    const l = B(t, n);
+    u(l);
   }, [e, t, n]), m(() => {
-    if (!e || !w || !o)
+    if (!e || !g || !c)
       return;
-    let c = j(o, w);
-    s && (c = Math.min(c, 100 - s)), x(c);
-  }, [e, o, w]), m(() => {
-    const c = A(p, r);
-    g(c);
-  }, [p, r]), m(() => {
-    const c = q(u, i);
-    b(c);
-  }, [u, i]), h;
-}, O = (e = {}) => {
-  const [t, n] = a(!1), o = H(null);
+    let l = O(c, g);
+    s && (l = Math.min(l, 100 - s)), I(l);
+  }, [e, c, g]), m(() => {
+    const l = G(d, r);
+    x(l);
+  }, [d, r]), m(() => {
+    const l = W(i, a);
+    w(l);
+  }, [i, a]), h;
+}, U = (e = {}) => {
+  const [t, n] = o(!1), c = k(null);
   return m(() => {
-    const i = new IntersectionObserver(
+    const a = new IntersectionObserver(
       (r) => {
-        const [l] = r;
-        l && (l.isIntersecting ? n(!0) : n(!1));
+        const [u] = r;
+        u && (u.isIntersecting ? n(!0) : n(!1));
       },
@@ -118,63 +118,74 @@ {
       }
-    ), { current: s } = o;
-    return s && i.observe(s), () => {
-      s && i.unobserve(s);
+    ), { current: s } = c;
+    return s && a.observe(s), () => {
+      s && a.unobserve(s);
     };
-  }, [e]), [o, t];
+  }, [e]), [c, t];
 };
-var S = "/Users/geoffrey/Desktop/perso/simpleParallax.js/src/react/index.tsx";
-const Y = ({
-  src: e,
+var H = "/Users/geoffrey/Desktop/perso/simpleParallax.js/src/react/index.tsx";
+const K = ({
+  src: e = "",
   alt: t = "",
   delay: n = 0.4,
-  orientation: o = "up",
-  scale: i = 1.2,
+  orientation: c = "up",
+  scale: a = 1.4,
   overflow: s = !1,
   transition: r = "cubic-bezier(0,0,0,1)",
-  maxTransition: l = null
+  maxTransition: u = null,
+  children: i
 }) => {
-  const u = o ?? "up", g = i ?? 1.2, [h, b] = a(!1), [p, x] = a(0), [w, c] = a(null), [y, C] = a(""), [T, z] = a(""), [I, L, N] = _(e), [P, R] = O({
+  var S;
+  const x = c ?? "up", h = a ?? 1.2, w = e ?? ((S = i == null ? void 0 : i.props) == null ? void 0 : S.src), [d, I] = o(!1), [g, l] = o(0), [z, L] = o(null), [R, N] = o(""), [V, P] = o(""), [b, _, M] = q(w), [A, v] = U({
     root: null,
     rootMargin: "0px",
     threshold: Array.from(Array(101).keys(), (f) => f / 100)
-  }), V = G({
-    isLoaded: N,
-    imageHeight: L,
-    scale: g,
-    boundingClientRect: w,
-    orientation: u,
-    maxTransition: l
-  }), $ = k(() => {
+  }), F = D({
+    isLoaded: M,
+    imageHeight: _,
+    scale: h,
+    boundingClientRect: z,
+    orientation: x,
+    maxTransition: u
+  }), $ = T(() => {
     var f;
-    if (!(!R && h) && (window.scrollY !== p || !h)) {
-      const v = (f = I.current) == null ? void 0 : f.getBoundingClientRect();
-      v && c(v), h || b(!0), x(window.scrollY);
+    if (!(!v && d) && (window.scrollY !== g || !d)) {
+      const y = (f = b.current) == null ? void 0 : f.getBoundingClientRect();
+      y && L(y), d || I(!0), l(window.scrollY);
     }
-  }, [p, R, I]);
-  return m(() => {
-    let f = `translate3d(${V})`;
-    s || (f += ` scale(${g})`), C(f);
-  }, [V, g]), m(() => {
-    !r || !n || z(`transform ${n}s ${r}`);
-  }, [r, n]), m(() => (F.register($), () => {
-    F.unregister($);
-  }), [$]), /* @__PURE__ */ E.createElement("div", { ref: P, style: {
+  }, [g, v, b]);
+  m(() => {
+    let f = `translate3d(${F})`;
+    s || (f += ` scale(${h})`), N(f);
+  }, [F, h]), m(() => {
+    !r || !n || P(`transform ${n}s ${r}`);
+  }, [r, n]), m(() => (C.register($), () => {
+    C.unregister($);
+  }), [$]);
+  const j = E.cloneElement(i, {
+    style: {
+      transform: R,
+      willChange: "transform",
+      transition: V
+    },
+    ref: b
+  });
+  return /* @__PURE__ */ E.createElement("div", { ref: A, style: {
     display: "inline-block",
     overflow: s ? "visible" : "hidden"
   }, __self: void 0, __source: {
-    fileName: S,
-    lineNumber: 80,
+    fileName: H,
+    lineNumber: 93,
     columnNumber: 5
-  } }, /* @__PURE__ */ E.createElement("img", { src: e, alt: t, ref: I, style: {
-    transform: y,
+  } }, i ? j : /* @__PURE__ */ E.createElement("img", { src: w, alt: t, ref: b, style: {
+    transform: R,
     willChange: "transform",
-    transition: T
+    transition: V
   }, __self: void 0, __source: {
-    fileName: S,
-    lineNumber: 87,
-    columnNumber: 7
+    fileName: H,
+    lineNumber: 103,
+    columnNumber: 9
   } }));
 };
 export {
-  Y as default
+  K as default
 };

dist/react/simpleParallax.umd.js

@@ -1,1 +0,1 @@
-(function(t,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("react")):typeof define=="function"&&define.amd?define(["react"],l):(t=typeof globalThis<"u"?globalThis:t||self,t.MyReactLibrary=l(t.React))})(this,function(t){"use strict";class l{constructor(){this.callbacks=new Set,this.animationFrameId=null}static getInstance(){return l.instance||(l.instance=new l),l.instance}register(n){this.callbacks.add(n),this.animationFrameId===null&&this.start()}unregister(n){this.callbacks.delete(n),this.callbacks.size===0&&this.animationFrameId!==null&&this.stop()}start(){const n=()=>{this.callbacks.forEach(s=>s()),this.animationFrameId=requestAnimationFrame(n)};this.animationFrameId=requestAnimationFrame(n)}stop(){this.animationFrameId!==null&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}}const I=l.getInstance(),v=e=>{const[n,s]=t.useState(0),[a,o]=t.useState(!1),r=t.useRef(null),i=t.useCallback(()=>{r.current&&s(r.current.height)},[]);return t.useEffect(()=>{const c=()=>{o(!0),i()},f=r.current;return f&&(f.complete?c():f.addEventListener("load",c)),window.addEventListener("resize",i),()=>{f&&f.removeEventListener("load",c),window.removeEventListener("resize",i)}},[e,i]),[r,n,a]},F=(e,n)=>e*n-e,k=(e,n)=>Math.ceil(e/100*n-n/2),H=(e,n)=>{const{top:s,height:a}=e,o=-a,r=n;if(s<o)return 0;if(s>r)return 100;const i=(s-o)/(r-o)*100;return Math.min(Math.max(i,0),100)},T=(e,n)=>{switch(n){case"up":return`0, ${e}px, 0`;case"right":return`${-e}px, 0, 0`;case"down":return`0, ${-e}px, 0`;case"left":return`${e}px, 0, 0`;case"up left":return`${e}px, ${e}px, 0`;case"up right":return`${-e}px, ${e}px, 0`;case"down left":return`${e}px, ${-e}px, 0`;case"left right":return`${-e}px, ${-e}px, 0`;default:return`0, ${e}px, 0`}},C=()=>{const[e,n]=t.useState(null);return t.useEffect(()=>{const s=()=>{n(window.innerHeight)};if(typeof window<"u")return n(window.innerHeight),window.addEventListener("resize",s),()=>{window.removeEventListener("resize",s)}},[]),e},L=({isLoaded:e,imageHeight:n,scale:s,boundingClientRect:a,orientation:o,maxTransition:r})=>{const[i,c]=t.useState(0),[f,d]=t.useState(0),[g,w]=t.useState(""),[h,b]=t.useState(0),p=C();return t.useEffect(()=>{if(!e)return;const u=F(n,s);c(u)},[e,n,s]),t.useEffect(()=>{if(!e||!p||!a)return;let u=H(a,p);r&&(u=Math.min(u,100-r)),b(u)},[e,a,p]),t.useEffect(()=>{const u=k(h,i);d(u)},[h,i]),t.useEffect(()=>{const u=T(f,o);w(u)},[f,o]),g},P=(e={})=>{const[n,s]=t.useState(!1),a=t.useRef(null);return t.useEffect(()=>{const o=new IntersectionObserver(i=>{const[c]=i;c&&(c.isIntersecting?s(!0):s(!1))},{...e}),{current:r}=a;return r&&o.observe(r),()=>{r&&o.unobserve(r)}},[e]),[a,n]};var E="/Users/geoffrey/Desktop/perso/simpleParallax.js/src/react/index.tsx";return({src:e,alt:n="",delay:s=.4,orientation:a="up",scale:o=1.2,overflow:r=!1,transition:i="cubic-bezier(0,0,0,1)",maxTransition:c=null})=>{const f=a??"up",d=o??1.2,[g,w]=t.useState(!1),[h,b]=t.useState(0),[p,u]=t.useState(null),[z,N]=t.useState(""),[M,_]=t.useState(""),[x,j,q]=v(e),[A,$]=P({root:null,rootMargin:"0px",threshold:Array.from(Array(101).keys(),m=>m/100)}),y=L({isLoaded:q,imageHeight:j,scale:d,boundingClientRect:p,orientation:f,maxTransition:c}),S=t.useCallback(()=>{var m;if(!(!$&&g)&&(window.scrollY!==h||!g)){const V=(m=x.current)==null?void 0:m.getBoundingClientRect();V&&u(V),g||w(!0),b(window.scrollY)}},[h,$,x]);return t.useEffect(()=>{let m=`translate3d(${y})`;r||(m+=` scale(${d})`),N(m)},[y,d]),t.useEffect(()=>{!i||!s||_(`transform ${s}s ${i}`)},[i,s]),t.useEffect(()=>(I.register(S),()=>{I.unregister(S)}),[S]),t.createElement("div",{ref:A,style:{display:"inline-block",overflow:r?"visible":"hidden"},__self:void 0,__source:{fileName:E,lineNumber:80,columnNumber:5}},t.createElement("img",{src:e,alt:n,ref:x,style:{transform:z,willChange:"transform",transition:M},__self:void 0,__source:{fileName:E,lineNumber:87,columnNumber:7}}))}});
+(function(e,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("react")):typeof define=="function"&&define.amd?define(["react"],c):(e=typeof globalThis<"u"?globalThis:e||self,e.MyReactLibrary=c(e.React))})(this,function(e){"use strict";class c{constructor(){this.callbacks=new Set,this.animationFrameId=null}static getInstance(){return c.instance||(c.instance=new c),c.instance}register(n){this.callbacks.add(n),this.animationFrameId===null&&this.start()}unregister(n){this.callbacks.delete(n),this.callbacks.size===0&&this.animationFrameId!==null&&this.stop()}start(){const n=()=>{this.callbacks.forEach(s=>s()),this.animationFrameId=requestAnimationFrame(n)};this.animationFrameId=requestAnimationFrame(n)}stop(){this.animationFrameId!==null&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}}const E=c.getInstance(),k=t=>{const[n,s]=e.useState(0),[u,a]=e.useState(!1),r=e.useRef(null),i=e.useCallback(()=>{r.current&&s(r.current.height)},[]);return e.useEffect(()=>{const f=()=>{a(!0),i()},o=r.current;return o&&(o.complete?f():o.addEventListener("load",f)),window.addEventListener("resize",i),()=>{o&&o.removeEventListener("load",f),window.removeEventListener("resize",i)}},[t,i]),[r,n,u]},H=(t,n)=>t*n-t,T=(t,n)=>Math.ceil(t/100*n-n/2),L=(t,n)=>{const{top:s,height:u}=t,a=-u,r=n;if(s<a)return 0;if(s>r)return 100;const i=(s-a)/(r-a)*100;return Math.min(Math.max(i,0),100)},P=(t,n)=>{switch(n){case"up":return`0, ${t}px, 0`;case"right":return`${-t}px, 0, 0`;case"down":return`0, ${-t}px, 0`;case"left":return`${t}px, 0, 0`;case"up left":return`${t}px, ${t}px, 0`;case"up right":return`${-t}px, ${t}px, 0`;case"down left":return`${t}px, ${-t}px, 0`;case"left right":return`${-t}px, ${-t}px, 0`;default:return`0, ${t}px, 0`}},z=()=>{const[t,n]=e.useState(null);return e.useEffect(()=>{const s=()=>{n(window.innerHeight)};if(typeof window<"u")return n(window.innerHeight),window.addEventListener("resize",s),()=>{window.removeEventListener("resize",s)}},[]),t},N=({isLoaded:t,imageHeight:n,scale:s,boundingClientRect:u,orientation:a,maxTransition:r})=>{const[i,f]=e.useState(0),[o,b]=e.useState(0),[p,h]=e.useState(""),[d,x]=e.useState(0),g=z();return e.useEffect(()=>{if(!t)return;const l=H(n,s);f(l)},[t,n,s]),e.useEffect(()=>{if(!t||!g||!u)return;let l=L(u,g);r&&(l=Math.min(l,100-r)),x(l)},[t,u,g]),e.useEffect(()=>{const l=T(d,i);b(l)},[d,i]),e.useEffect(()=>{const l=P(o,a);h(l)},[o,a]),p},M=(t={})=>{const[n,s]=e.useState(!1),u=e.useRef(null);return e.useEffect(()=>{const a=new IntersectionObserver(i=>{const[f]=i;f&&(f.isIntersecting?s(!0):s(!1))},{...t}),{current:r}=u;return r&&a.observe(r),()=>{r&&a.unobserve(r)}},[t]),[u,n]};var I="/Users/geoffrey/Desktop/perso/simpleParallax.js/src/react/index.tsx";return({src:t="",alt:n="",delay:s=.4,orientation:u="up",scale:a=1.4,overflow:r=!1,transition:i="cubic-bezier(0,0,0,1)",maxTransition:f=null,children:o})=>{var F;const b=u??"up",p=a??1.2,h=t??((F=o==null?void 0:o.props)==null?void 0:F.src),[d,x]=e.useState(!1),[g,l]=e.useState(0),[_,j]=e.useState(null),[$,q]=e.useState(""),[y,A]=e.useState(""),[w,B,G]=k(h),[O,V]=M({root:null,rootMargin:"0px",threshold:Array.from(Array(101).keys(),m=>m/100)}),v=N({isLoaded:G,imageHeight:B,scale:p,boundingClientRect:_,orientation:b,maxTransition:f}),S=e.useCallback(()=>{var m;if(!(!V&&d)&&(window.scrollY!==g||!d)){const C=(m=w.current)==null?void 0:m.getBoundingClientRect();C&&j(C),d||x(!0),l(window.scrollY)}},[g,V,w]);e.useEffect(()=>{let m=`translate3d(${v})`;r||(m+=` scale(${p})`),q(m)},[v,p]),e.useEffect(()=>{!i||!s||A(`transform ${s}s ${i}`)},[i,s]),e.useEffect(()=>(E.register(S),()=>{E.unregister(S)}),[S]);const W=e.cloneElement(o,{style:{transform:$,willChange:"transform",transition:y},ref:w});return e.createElement("div",{ref:O,style:{display:"inline-block",overflow:r?"visible":"hidden"},__self:void 0,__source:{fileName:I,lineNumber:93,columnNumber:5}},o?W:e.createElement("img",{src:h,alt:n,ref:w,style:{transform:$,willChange:"transform",transition:y},__self:void 0,__source:{fileName:I,lineNumber:103,columnNumber:9}}))}});

package.json

 {
   "name": "simple-parallax-js-beta",
-  "version": "6.0.9",
+  "version": "6.0.10",
   "main": "dist/react/simpleParallax.umd.js",
@@ -5,0 +5,0 @@ "module": "dist/react/simpleParallax.es.js",

src/react/types/index.ts

@@ -11,3 +11,3 @@ export type Orientation =
 export interface SimpleParallaxProps {
-  src: string;
+  src?: string;
   alt?: string;
@@ -20,2 +20,3 @@ delay?: number;
   maxTransition?: number | null;
+  children?: React.ReactNode;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

75978

increased by0.92%

Lines of code

1478

increased by2.28%

No dependency changes