Merge pull request #321 from DaniAcu/fix/types-version-react

fix(react): typescript and react version compatibility

packages/react-lenis/package.json

@@ -50,11 +50,13 @@
   "dependencies": {
     "@studio-freight/hamo": "^0.6.28",
     "@studio-freight/lenis": "^1.0.40",
+    "@types/react": "^18.0.0",
     "clsx": "^2.0.0",
+    "react": "^18.0.0",
     "zustand": "^4.4.7"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18"
   }
 }

packages/react-lenis/src/index.tsx

@@ -20,11 +20,21 @@ import React, {
 import { create } from 'zustand'
 import { version } from '../package.json'
 
+type LenisEventHandler = (lenis: Lenis) => void;
+interface LenisContextValue {
+  lenis: Lenis;
+  addCallback: (handler: LenisEventHandler, priority: number) => void;
+  removeCallback: (handler: LenisEventHandler) => void;
+}
+
+declare global {
+  interface Window { reactLenisVersion: string; }
+}
 if (typeof window !== 'undefined') window.reactLenisVersion = version
 
-export const LenisContext = createContext() as Lenis | null
+export const LenisContext = createContext<LenisContextValue | null>(null);
 
-const useRoot = create(() => ({}))
+const useRoot = create<Partial<LenisContextValue>>(() => ({}))
 
 function useCurrentLenis() {
   const local = useContext(LenisContext)
@@ -35,7 +45,7 @@ function useCurrentLenis() {
 
 export function useLenis(
   callback?: (lenis: Lenis) => void,
-  deps?: Array<any> = [],
+  deps: Array<any> = [],
   priority = 0
 ): Lenis | undefined {
   const { lenis, addCallback, removeCallback } = useCurrentLenis()
@@ -90,19 +100,22 @@ const ReactLenis: ForwardRefComponent<Props, LenisRef> = forwardRef<
     }: Props,
     ref
   ) => {
-    const wrapperRef = useRef()
-    const contentRef = useRef()
+    const wrapperRef = useRef<HTMLDivElement | null>(null)
+    const contentRef = useRef<HTMLDivElement | null>(null)
 
-    const [lenis, setLenis] = useState()
+    const [lenis, setLenis] = useState<Lenis | undefined>(undefined);
 
-    const callbacksRefs = useRef([])
+    const callbacksRefs = useRef<{
+      callback: LenisEventHandler,
+      priority: number,
+    }[]>([])
 
-    const addCallback = useCallback((callback, priority) => {
+    const addCallback: LenisContextValue["addCallback"] = useCallback((callback, priority) => {
       callbacksRefs.current.push({ callback, priority })
       callbacksRefs.current.sort((a, b) => a.priority - b.priority)
     }, [])
 
-    const removeCallback = useCallback((callback) => {
+    const removeCallback: LenisContextValue["removeCallback"] = useCallback((callback) => {
       callbacksRefs.current = callbacksRefs.current.filter(
         (cb) => cb.callback !== callback
       )
@@ -111,8 +124,8 @@ const ReactLenis: ForwardRefComponent<Props, LenisRef> = forwardRef<
     useImperativeHandle(
       ref,
       () => ({
-        wrapper: wrapperRef.current,
-        content: contentRef.current,
+        wrapper: wrapperRef.current!,
+        content: contentRef.current!,
         lenis,
       }),
       [lenis]
@@ -122,8 +135,8 @@ const ReactLenis: ForwardRefComponent<Props, LenisRef> = forwardRef<
       const lenis = new Lenis({
         ...options,
         ...(!root && {
-          wrapper: wrapperRef.current,
-          content: contentRef.current,
+          wrapper: wrapperRef.current!,
+          content: contentRef.current!,
         }),
       })
 
@@ -135,7 +148,7 @@ const ReactLenis: ForwardRefComponent<Props, LenisRef> = forwardRef<
       }
     }, [root, JSON.stringify(options)])
 
-    useFrame((time) => {
+    useFrame((time: number) => {
       if (autoRaf) {
         lenis?.raf(time)
       }
@@ -147,9 +160,9 @@ const ReactLenis: ForwardRefComponent<Props, LenisRef> = forwardRef<
       }
     }, [root, lenis, addCallback, removeCallback])
 
-    const onScroll = useCallback((e) => {
+    const onScroll = useCallback((lenisInstance: Lenis) => {
       for (let i = 0; i < callbacksRefs.current.length; i++) {
-        callbacksRefs.current[i].callback(e)
+        callbacksRefs.current[i].callback(lenisInstance)
       }
     }, [])
 
@@ -178,7 +191,7 @@ const ReactLenis: ForwardRefComponent<Props, LenisRef> = forwardRef<
     }, [lenis, onClassNameChange])
 
     return (
-      <LenisContext.Provider value={{ lenis, addCallback, removeCallback }}>
+      <LenisContext.Provider value={{ lenis: lenis!, addCallback, removeCallback }}>
         {root ? (
           children
         ) : (

packages/react-lenis/tsconfig.json

@@ -11,6 +11,7 @@
     "noEmit": true,
     "allowJs": true,
     "removeComments": true,
+    "resolveJsonModule": true,
     "outDir": "./dist/types",
     "jsx": "react"
   },

yarn.lock

@@ -451,11 +451,30 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
 
+"@types/prop-types@*":
+  version "15.7.12"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
+  integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
+
+"@types/react@^18.0.0":
+  version "18.2.69"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.69.tgz#313ec21891b22bb7646a54cb4bdb8cddb0880271"
+  integrity sha512-W1HOMUWY/1Yyw0ba5TkCV+oqynRjG7BnteBB+B7JmAK7iw3l2SW+VGOxL+akPweix6jk2NNJtyJKpn4TkpfK3Q==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/[email protected]":
   version "1.20.2"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.2.tgz#97d26e00cd4a0423b4af620abecf3e6f442b7975"
   integrity sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==
 
+"@types/scheduler@*":
+  version "0.16.8"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
+  integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
+
 acorn@^8.8.2:
   version "8.11.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
@@ -1340,6 +1359,11 @@ cross-var@^1.1.0:
     cross-spawn "^5.0.1"
     exit "^0.1.2"
 
+csstype@^3.0.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -1886,7 +1910,7 @@ lodash@^4.17.4:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.0.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -2105,6 +2129,13 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
+react@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 read-pkg@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
@@ -2579,7 +2610,7 @@ yallist@^3.0.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
-zustand@^4.4.7, zustand@^4.5.1:
+zustand@^4.4.7:
   version "4.5.1"
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.1.tgz#2088956ee454759fb8b866ca335a2373e76736c5"
   integrity sha512-XlauQmH64xXSC1qGYNv00ODaQ3B+tNPoy22jv2diYiP4eoDKr9LA+Bh5Bc3gplTrFdb6JVI+N4kc1DZ/tbtfPg==