react-infinite-ticker - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

dist/react-infinite-ticker.es.js

@@ -1,1 +0,1 @@
-import t,{useRef as e,useMemo as n,useEffect as r}from"react";function a(t,e,n,r){return new Promise((a=>{const l=t.animate(e,n),s=()=>{l.cancel()},i=()=>{r.removeEventListener("abort",s),l.removeEventListener("finish",i),a()};r.addEventListener("abort",s),l.addEventListener("finish",i)}))}const l=({children:l,duration:s,easing:i,delay:o})=>{const c=e(null),d=e(null),f=n((()=>({duration:s,easing:i,delay:o,iterations:1,fill:"forwards"})),[s,i,o]);return r((()=>{var t;const e=null==(t=c.current)?void 0:t.getBoundingClientRect().height;if(!e||!c.current||!d.current)return;const n=e,r=c.current,l=d.current,s=new AbortController;return async function t(){const e=[{transform:"translateY(0px)"},{transform:`translateY(${-1*n}px)`}],i=[{transform:`translateY(${n}px)`},{transform:"translateY(0px)"}],o=[{transform:`translateY(${-1*n}px)`},{transform:`translateY(${-2*n}px)`}],c=a(r,e,f,s.signal).then((()=>a(r,i,f,s.signal))),d=a(l,e,f,s.signal).then((()=>a(l,o,f,s.signal)));return Promise.all([c,d]).then((()=>t()))}(),()=>{s.abort()}}),[f]),t.createElement("div",{style:{overflow:"hidden",height:"100%"}},t.createElement("div",{ref:c},l),t.createElement("div",{ref:d},l))},s=({children:l,duration:s,easing:i,delay:o})=>{const c=e(null),d=e(null),f=n((()=>({duration:s,easing:i,delay:o,iterations:1,fill:"forwards"})),[s,i,o]);return r((()=>{var t;const e=null==(t=c.current)?void 0:t.getBoundingClientRect().width;if(!e||!c.current||!d.current)return;const n=e,r=c.current,l=d.current,s=new AbortController;return async function t(){const e=[{transform:"translateX(0px)"},{transform:`translateX(${-1*n}px)`}],i=[{transform:`translateX(${n}px)`},{transform:"translateX(0px)"}],o=[{transform:`translateX(${-1*n}px)`},{transform:`translateX(${-2*n}px)`}],c=a(r,e,f,s.signal).then((()=>a(r,i,f,s.signal))),d=a(l,e,f,s.signal).then((()=>a(l,o,f,s.signal)));return Promise.all([c,d]).then((()=>t()))}(),()=>{s.abort()}}),[f]),t.createElement("div",{style:{overflow:"hidden",display:"flex",flexWrap:"nowrap",width:"100%"}},t.createElement("div",{ref:c,style:{display:"flex"}},l),t.createElement("div",{ref:d,style:{display:"flex"}},l))};export{s as HorizontalTicker,l as VerticalTicker};
+import e,{useState as r,useRef as t,useEffect as n,useMemo as a}from"react";function i(e,r,t,n){return new Promise((a=>{const i=e.animate(r,t),s=()=>{i.cancel()},o=()=>{n.removeEventListener("abort",s),i.removeEventListener("finish",o),a()};n.addEventListener("abort",s),i.addEventListener("finish",o)}))}function s(e){const[a,i]=r(),[s,o]=r();return function(e){const r=t(e);n((()=>{r.current=e})),n((()=>{const e=()=>{"function"==typeof r.current&&r.current()};return requestAnimationFrame(e),window.addEventListener("resize",e,{passive:!0}),()=>{window.removeEventListener("resize",e)}}),[])}((()=>{i((r=>{var t;const n=null==(t=e.current)?void 0:t.getBoundingClientRect().width;return r!==n?n:r})),o((r=>{var t;const n=null==(t=e.current)?void 0:t.getBoundingClientRect().height;return r!==n?n:r}))})),{width:a,height:s}}const o=({children:r,duration:o,easing:l,delay:c,reverse:u=!1})=>{const d=t(null),f=t(null),m=a((()=>({duration:o,easing:l,delay:c,iterations:1,fill:"forwards",direction:u?"reverse":"normal"})),[o,l,c,u]),{height:v}=s(d);return n((()=>{if(!v||!d.current||!f.current)return;const e=v,r=d.current,t=f.current,n=new AbortController;return async function a(){const s=[{transform:"translateY(0px)"},{transform:`translateY(${-1*e}px)`}],o=[{transform:`translateY(${e}px)`},{transform:"translateY(0px)"}],l=[{transform:`translateY(${-1*e}px)`},{transform:`translateY(${-2*e}px)`}],c=i(r,s,m,n.signal).then((()=>i(r,o,m,n.signal))),u=i(t,s,m,n.signal).then((()=>i(t,l,m,n.signal)));return Promise.all([c,u]).then((()=>a()))}(),()=>{n.abort()}}),[v,m]),e.createElement("div",{style:{overflow:"hidden",height:"100%"}},e.createElement("div",{ref:d},r),e.createElement("div",{ref:f},r))},l=({children:r,duration:o,easing:l,delay:c,reverse:u=!1})=>{const d=t(null),f=t(null),m=a((()=>({duration:o,easing:l,delay:c,iterations:1,fill:"forwards",direction:u?"reverse":"normal"})),[o,l,c,u]),{width:v}=s(d);return n((()=>{if(!v||!d.current||!f.current)return;const e=v,r=d.current,t=f.current,n=new AbortController;return async function a(){const s=[{transform:"translateX(0px)"},{transform:`translateX(${-1*e}px)`}],o=[{transform:`translateX(${e}px)`},{transform:"translateX(0px)"}],l=[{transform:`translateX(${-1*e}px)`},{transform:`translateX(${-2*e}px)`}],c=i(r,s,m,n.signal).then((()=>i(r,o,m,n.signal))),u=i(t,s,m,n.signal).then((()=>i(t,l,m,n.signal)));return Promise.all([c,u]).then((()=>a()))}(),()=>{n.abort()}}),[v,m]),e.createElement("div",{style:{overflow:"hidden",display:"flex",flexWrap:"nowrap",width:"100%"}},e.createElement("div",{ref:d,style:{display:"flex"}},r),e.createElement("div",{ref:f,style:{display:"flex"}},r))};export{l as HorizontalTicker,o as VerticalTicker};

dist/react-infinite-ticker.umd.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Ticker={},e.React)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(t);function a(e,t,n,r){return new Promise((a=>{const l=e.animate(t,n),s=()=>{l.cancel()},i=()=>{r.removeEventListener("abort",s),l.removeEventListener("finish",i),a()};r.addEventListener("abort",s),l.addEventListener("finish",i)}))}e.HorizontalTicker=({children:e,duration:n,easing:l,delay:s})=>{const i=t.useRef(null),o=t.useRef(null),f=t.useMemo((()=>({duration:n,easing:l,delay:s,iterations:1,fill:"forwards"})),[n,l,s]);return t.useEffect((()=>{var e;const t=null==(e=i.current)?void 0:e.getBoundingClientRect().width;if(!t||!i.current||!o.current)return;const n=t,r=i.current,l=o.current,s=new AbortController;return async function e(){const t=[{transform:"translateX(0px)"},{transform:`translateX(${-1*n}px)`}],i=[{transform:`translateX(${n}px)`},{transform:"translateX(0px)"}],o=[{transform:`translateX(${-1*n}px)`},{transform:`translateX(${-2*n}px)`}],u=a(r,t,f,s.signal).then((()=>a(r,i,f,s.signal))),d=a(l,t,f,s.signal).then((()=>a(l,o,f,s.signal)));return Promise.all([u,d]).then((()=>e()))}(),()=>{s.abort()}}),[f]),r.default.createElement("div",{style:{overflow:"hidden",display:"flex",flexWrap:"nowrap",width:"100%"}},r.default.createElement("div",{ref:i,style:{display:"flex"}},e),r.default.createElement("div",{ref:o,style:{display:"flex"}},e))},e.VerticalTicker=({children:e,duration:n,easing:l,delay:s})=>{const i=t.useRef(null),o=t.useRef(null),f=t.useMemo((()=>({duration:n,easing:l,delay:s,iterations:1,fill:"forwards"})),[n,l,s]);return t.useEffect((()=>{var e;const t=null==(e=i.current)?void 0:e.getBoundingClientRect().height;if(!t||!i.current||!o.current)return;const n=t,r=i.current,l=o.current,s=new AbortController;return async function e(){const t=[{transform:"translateY(0px)"},{transform:`translateY(${-1*n}px)`}],i=[{transform:`translateY(${n}px)`},{transform:"translateY(0px)"}],o=[{transform:`translateY(${-1*n}px)`},{transform:`translateY(${-2*n}px)`}],u=a(r,t,f,s.signal).then((()=>a(r,i,f,s.signal))),d=a(l,t,f,s.signal).then((()=>a(l,o,f,s.signal)));return Promise.all([u,d]).then((()=>e()))}(),()=>{s.abort()}}),[f]),r.default.createElement("div",{style:{overflow:"hidden",height:"100%"}},r.default.createElement("div",{ref:i},e),r.default.createElement("div",{ref:o},e))},Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Ticker={},e.React)}(this,(function(e,t){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(t);function a(e,t,r,n){return new Promise((a=>{const i=e.animate(t,r),s=()=>{i.cancel()},o=()=>{n.removeEventListener("abort",s),i.removeEventListener("finish",o),a()};n.addEventListener("abort",s),i.addEventListener("finish",o)}))}function i(e){const[r,n]=t.useState(),[a,i]=t.useState();return function(e){const r=t.useRef(e);t.useEffect((()=>{r.current=e})),t.useEffect((()=>{const e=()=>{"function"==typeof r.current&&r.current()};return requestAnimationFrame(e),window.addEventListener("resize",e,{passive:!0}),()=>{window.removeEventListener("resize",e)}}),[])}((()=>{n((t=>{var r;const n=null==(r=e.current)?void 0:r.getBoundingClientRect().width;return t!==n?n:t})),i((t=>{var r;const n=null==(r=e.current)?void 0:r.getBoundingClientRect().height;return t!==n?n:t}))})),{width:r,height:a}}e.HorizontalTicker=({children:e,duration:r,easing:s,delay:o,reverse:l=!1})=>{const u=t.useRef(null),f=t.useRef(null),c=t.useMemo((()=>({duration:r,easing:s,delay:o,iterations:1,fill:"forwards",direction:l?"reverse":"normal"})),[r,s,o,l]),{width:d}=i(u);return t.useEffect((()=>{if(!d||!u.current||!f.current)return;const e=d,t=u.current,r=f.current,n=new AbortController;return async function i(){const s=[{transform:"translateX(0px)"},{transform:`translateX(${-1*e}px)`}],o=[{transform:`translateX(${e}px)`},{transform:"translateX(0px)"}],l=[{transform:`translateX(${-1*e}px)`},{transform:`translateX(${-2*e}px)`}],u=a(t,s,c,n.signal).then((()=>a(t,o,c,n.signal))),f=a(r,s,c,n.signal).then((()=>a(r,l,c,n.signal)));return Promise.all([u,f]).then((()=>i()))}(),()=>{n.abort()}}),[d,c]),n.default.createElement("div",{style:{overflow:"hidden",display:"flex",flexWrap:"nowrap",width:"100%"}},n.default.createElement("div",{ref:u,style:{display:"flex"}},e),n.default.createElement("div",{ref:f,style:{display:"flex"}},e))},e.VerticalTicker=({children:e,duration:r,easing:s,delay:o,reverse:l=!1})=>{const u=t.useRef(null),f=t.useRef(null),c=t.useMemo((()=>({duration:r,easing:s,delay:o,iterations:1,fill:"forwards",direction:l?"reverse":"normal"})),[r,s,o,l]),{height:d}=i(u);return t.useEffect((()=>{if(!d||!u.current||!f.current)return;const e=d,t=u.current,r=f.current,n=new AbortController;return async function i(){const s=[{transform:"translateY(0px)"},{transform:`translateY(${-1*e}px)`}],o=[{transform:`translateY(${e}px)`},{transform:"translateY(0px)"}],l=[{transform:`translateY(${-1*e}px)`},{transform:`translateY(${-2*e}px)`}],u=a(t,s,c,n.signal).then((()=>a(t,o,c,n.signal))),f=a(r,s,c,n.signal).then((()=>a(r,l,c,n.signal)));return Promise.all([u,f]).then((()=>i()))}(),()=>{n.abort()}}),[d,c]),n.default.createElement("div",{style:{overflow:"hidden",height:"100%"}},n.default.createElement("div",{ref:u},e),n.default.createElement("div",{ref:f},e))},Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));

dist/TickerProps.d.ts

@@ -1,5 +0,7 @@
-export declare type TickerProps = {
+import type { PropsWithChildren } from "react";
+export declare type TickerProps = PropsWithChildren<{
     duration: KeyframeAnimationOptions["duration"];
     easing?: KeyframeAnimationOptions["easing"];
     delay?: KeyframeAnimationOptions["delay"];
-};
+    reverse?: boolean;
+}>;

package.json

 {
   "name": "react-infinite-ticker",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "React component that scrolls children infinitely",
@@ -40,4 +40,4 @@ "files": [
   "devDependencies": {
-    "@types/react": "^17.0.20",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.1",
     "@typescript-eslint/eslint-plugin": "^4.31.0",
@@ -55,5 +55,6 @@ "@typescript-eslint/parser": "^4.31.0",
   "peerDependencies": {
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "@types/react": "^16.8 || ^17.0 || ^18.0",
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0"
   }
 }

README.md

@@ -52,1 +52,5 @@ # react-infinite-ticker
 The rate of the animation's change over time. Accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)". Defaults to "linear". [(source)](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#easing)
+
+### `reverse` _(optional)_
+
+The **boolean** indicating whether the animation should run forward or backward. Defaults to `false`

No alert changes

Improved metrics

Total package byte prevSize

10778

increased by16.59%

Number of package files

11

increased by10%

Lines of code

45

increased by32.35%

Number of lines in readme file

56

increased by7.69%

Worsened metrics

Dependency count

3

increased by50%

No dependency changes