improved type declarations

Author: olarsson

README.md

@@ -1,4 +1,4 @@
-# react-scrollsy v1.1.5 ![](https://img.badgesize.io/olarsson/react-scrollsy/master/dist/react-scrollsy.es.js)
+# react-scrollsy v1.1.6 ![](https://img.badgesize.io/olarsson/react-scrollsy/master/dist/react-scrollsy.es.js)
 
 An ambitious light-weight react module written in TypeScript for tracking scroll progress in a performant way. Developed for use with spring based animation libraries such as react-spring, but can be used with or without any library.
 
@@ -191,6 +191,10 @@ If it still doesnt work then change the import string in the following fashion:
 
 ### Whats new
 
+##### Version 1.1.6
+- [x] Improved type declarations
+- [x] Minor changes to some examples
+
 ##### Version 1.1.5
 - [x] Updated the readme with use examples for Next.js
 

dist/react-scrollsy.es.js

@@ -1,4 +1,4 @@
-import { memo as L, useState as h, useEffect as g } from "react";
+import { memo as L, useState as p, useEffect as h } from "react";
 import { jsx as M } from "react/jsx-runtime";
 var y = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
 function z(e) {
@@ -26,9 +26,9 @@ var j = { exports: {} };
               throw d.code = "MODULE_NOT_FOUND", d;
             }
             var m = t[l] = { exports: {} };
-            r[l][0].call(m.exports, function(p) {
-              var w = r[l][1][p];
-              return s(w || p);
+            r[l][0].call(m.exports, function(g) {
+              var w = r[l][1][g];
+              return s(w || g);
             }, m, m.exports, i, r, t, o);
           }
           return t[l].exports;
@@ -194,19 +194,19 @@ const _ = (e, n) => {
   },
   start: 0,
   end: 0
-}, C = (e, n = q) => typeof e == "function" ? e({ scrollObject: n, children: e }) : e, K = L(({ scrollData: e, children: n, elem: i, settings: r, onStart: t, onEnd: o }) => {
-  const { trigger: s = S.trigger, offsetTop: u, offsetBottom: c, duration: l } = r, [a, f] = h(!1), [d, m] = h(!1), [p, w] = h(!1);
-  if (g(() => {
+}, C = (e, n = q) => typeof e == "function" ? e && e({ scrollObject: n, children: e }) : e, K = L(({ scrollData: e, children: n, elem: i, settings: r, onStart: t, onEnd: o }) => {
+  const { trigger: s = S.trigger, offsetTop: u, offsetBottom: c, duration: l } = r, [a, f] = p(!1), [d, m] = p(!1), [g, w] = p(!1);
+  if (h(() => {
     a && typeof t == "function" && t();
-  }, [a]), g(() => {
+  }, [a]), h(() => {
     d && typeof o == "function" && o();
-  }, [d]), g(() => {
+  }, [d]), h(() => {
     i != null && i.current && w(!0);
-  }, [i]), !p)
+  }, [i]), !g)
     return C(n, q);
   const x = D(i.current, e, s, u, c, l), { progress: v } = x;
   return v > 0 && v < 1 && a === !1 && typeof t == "function" && f(!0), v <= 0 && a === !0 && typeof t == "function" && f(!1), v >= 1 && d === !1 && typeof o == "function" && m(!0), v < 1 && d === !0 && typeof o == "function" && m(!1), C(n, x);
-}), E = ({ scrollData: e, children: n }) => typeof n == "function" ? n({
+}), E = ({ scrollData: e, children: n }) => typeof n == "function" ? n && n({
   scrollData: {
     scrollTop: e.scrollTop,
     scrollHeight: e.scrollHeight,
@@ -216,8 +216,8 @@ const _ = (e, n) => {
   },
   children: n
 }) : n, Q = ({ children: e, scrollThrottle: n, resizeThrottle: i }) => {
-  const [r, t] = h(!1);
-  return g(() => {
+  const [r, t] = p(!1);
+  return h(() => {
     t(!0);
   }, []), r ? /* @__PURE__ */ M(W, { scrollThrottle: n, resizeThrottle: i, children: e }) : E({
     scrollData: {
@@ -234,10 +234,10 @@ const _ = (e, n) => {
   if (!r)
     throw new Error("No document.documentElement found.");
   let t = null;
-  const [o, s] = h(P()), [u, c] = h(0), l = () => {
+  const [o, s] = p(P()), [u, c] = p(0), l = () => {
     t && window.cancelAnimationFrame(t), t = window.requestAnimationFrame(() => {
-      const { scrollTop: m, scrollHeight: p } = r;
-      c(m / (p - o));
+      const { scrollTop: m, scrollHeight: g } = r;
+      c(m / (g - o));
     });
   }, a = () => {
     s(P());
@@ -248,9 +248,9 @@ const _ = (e, n) => {
   }, n) : () => {
     l();
   };
-  return g(() => (window.addEventListener("resize", f), s(P()), a(), () => {
+  return h(() => (window.addEventListener("resize", f), s(P()), a(), () => {
     window.removeEventListener("resize", f);
-  }), []), g(() => (document.addEventListener("scroll", d, { passive: !0 }), d(), () => {
+  }), []), h(() => (document.addEventListener("scroll", d, { passive: !0 }), d(), () => {
     document.removeEventListener("scroll", d);
   }), [o]), E({
     scrollData: {
@@ -263,7 +263,7 @@ const _ = (e, n) => {
     children: e
   });
 }, X = ({ children: e, scrollThrottle: n, scrollingElement: i, resizeThrottle: r }) => {
-  const [t, o] = h(!1), [s, u] = h(void 0), c = E({
+  const [t, o] = p(!1), [s, u] = p(void 0), c = E({
     scrollData: {
       scrollTop: 0,
       scrollHeight: 0,
@@ -288,10 +288,10 @@ const _ = (e, n) => {
   if (typeof window > "u")
     throw new Error("No window found.");
   let o = null;
-  const [s, u] = h(T(t)), [c, l] = h(0), a = () => {
+  const [s, u] = p(T(t)), [c, l] = p(0), a = () => {
     o && window.cancelAnimationFrame(o), o = window.requestAnimationFrame(() => {
-      const { scrollTop: p, scrollHeight: w } = t;
-      l(p / (w - s));
+      const { scrollTop: g, scrollHeight: w } = t;
+      l(g / (w - s));
     });
   }, f = () => {
     u(T(t));
@@ -302,9 +302,9 @@ const _ = (e, n) => {
   }, i) : () => {
     a();
   };
-  return g(() => (window.addEventListener("resize", d), u(T(t)), f(), () => {
+  return h(() => (window.addEventListener("resize", d), u(T(t)), f(), () => {
     window.removeEventListener("resize", d);
-  }), []), g(() => (t.addEventListener("scroll", m, {
+  }), []), h(() => (t.addEventListener("scroll", m, {
     passive: !0
   }), m(), () => {
     t.removeEventListener("scroll", m);

dist/react-scrollsy.umd.js

@@ -1,4 +1,17 @@
 /// <reference types="react" />
+type TThrottles = {
+    resizeThrottle?: number;
+    scrollThrottle?: number;
+};
+type TScrollObject = {
+    progress: number;
+    scrollData: IScrollDataBase;
+    start: number;
+    end: number;
+};
+export type TChildren = ((props: IScrollDataChildren | IScrollObject) => any) | {
+    children: React.ReactNode;
+};
 export interface IScrollDataBase {
     scrollTop: number;
     scrollHeight: number;
@@ -11,22 +24,13 @@ export interface IScrollData {
 }
 export interface IScrollDataChildren {
     scrollData: IScrollDataBase;
-    children: any;
+    children: TChildren;
 }
 export interface IScrollObject {
-    scrollObject: {
-        progress: number;
-        scrollData: IScrollDataBase;
-        start: number;
-        end: number;
-    };
-    children: any;
+    scrollObject: TScrollObject;
+    children: TChildren;
 }
-export interface IScrollTrackerObject {
-    progress: number;
-    scrollData: IScrollDataBase;
-    start: number;
-    end: number;
+export interface IScrollTrackerObject extends TScrollObject {
 }
 export interface IScrollTrackerSettingsProperties {
     distance: number;
@@ -43,26 +47,21 @@ export interface IScrollTrackerSettingsArray extends Array<IScrollTrackerSetting
 }
 export interface IScrollTracker {
     scrollData: IScrollDataBase;
-    children: React.ReactNode | any;
+    children: TChildren;
     elem?: React.RefObject<HTMLInputElement>;
     settings: IScrollTrackerSettings;
-    onStart?: any;
-    onEnd?: any;
+    onStart?: () => void;
+    onEnd?: () => void;
 }
-export interface IScrollTrackerDocument {
-    resizeThrottle?: number;
-    scrollThrottle?: number;
-    children: any;
+export interface IScrollTrackerDocument extends TThrottles {
+    children: TChildren;
 }
-export interface IScrollTrackerCustom {
-    resizeThrottle?: number;
-    scrollThrottle?: number;
+export interface IScrollTrackerCustom extends TThrottles {
     scrollingElement?: string;
-    children: any;
+    children: TChildren;
 }
-export interface IScrollTrackerCustomMain {
-    resizeThrottle?: number;
-    scrollThrottle?: number;
+export interface IScrollTrackerCustomMain extends TThrottles {
     customScrollingElement?: HTMLElement | null;
-    children: any;
+    children: TChildren;
 }
+export {};

dist/types.d.ts

@@ -1,7 +1,7 @@
 {
   "name": "react-scrollsy",
   "private": false,
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "",
   "license": "MIT",
   "type": "module",
@@ -12,6 +12,9 @@
   },
   "keywords": [
     "react",
+    "react scroll",
+    "scroll triggered",
+    "scrolltriggered",
     "scrolling",
     "scrolling animation",
     "scroll",

package.json

@@ -1,11 +1,11 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { memo, useEffect, useState } from "react";
 import { elementVisibility } from "./functions/elementVisibility";
-import { IScrollTrackerObject, IScrollTracker } from "./types";
+import { IScrollTrackerObject, IScrollTracker, TChildren } from "./types";
 import { defaultConfig, emptyScrollObject } from "./config";
 
-const childrenAsMethod = (children: any, scrollObject: IScrollTrackerObject = emptyScrollObject) => {
+const childrenAsMethod = (children: TChildren, scrollObject: IScrollTrackerObject = emptyScrollObject) => {
   if (typeof children === "function") {
+    if (!children) return children;
     return children({ scrollObject, children });
   }
   return children;

src/ScrollTracker.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState, useEffect } from "react";
 
 import { throttle, throttleLastCall, getContainerClientHeight, waitForElm } from "./functions/utils";

src/ScrollTrackerCustom.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import { describe, test, expect } from "vitest";
 import { render } from "@testing-library/react";
 
@@ -8,14 +10,12 @@ describe("<ScrollTrackerDocument />", () => {
   test("ScrollTrackerDocument mounts properly", () => {
     const wrapper = render(
       <ScrollTrackerDocument>
-        {({ scrollData }: IScrollData) => {
-          return (
-            <>
-              <h1>mounted</h1>
-              <p className='element'>{scrollData.element?.nodeName}</p>
-            </>
-          );
-        }}
+        {({ scrollData }: IScrollData) => (
+          <>
+            <h1>mounted</h1>
+            <p className='element'>{scrollData.element?.nodeName}</p>
+          </>
+        )}
       </ScrollTrackerDocument>
     );
 

src/ScrollTrackerDocument.test.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect, useState } from "react";
 
 import { throttle, throttleLastCall, correctInnerHeight } from "./functions/utils";
@@ -38,7 +37,7 @@ const ScrollTrackerDocumentMain = ({ children, scrollThrottle, resizeThrottle =
     throw new Error("No document.documentElement found.");
   }
 
-  let timeout: any = null;
+  let timeout: number | null = null;
 
   const [containerHeight, setcontainerHeight] = useState<number>(correctInnerHeight());
   const [percentProgress, setPercentProgress] = useState<number>(0);

src/ScrollTrackerDocument.tsx

@@ -2,6 +2,7 @@ import { IScrollDataChildren } from "../types";
 
 export const childrenAsMethod = ({ scrollData, children }: IScrollDataChildren) => {
   if (typeof children === "function") {
+    if (!children) return children;
     return children({
       scrollData: {
         scrollTop: scrollData.scrollTop,