fix lenis/react autoRaf prop

darkroomengineering · Nov 5, 2024 · a7f1866 · a7f1866
1 parent 338b030
commit a7f1866
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -116,7 +116,7 @@ html.lenis, html.lenis body {
 }
 
 .lenis.lenis-stopped {
-  overflow: hidden;
+  overflow: clip;
 }
 
 .lenis.lenis-smooth iframe {

diff --git a/packages/core/lenis.css b/packages/core/lenis.css
@@ -12,7 +12,7 @@ html.lenis body {
 }
 
 .lenis.lenis-stopped {
-  overflow: hidden;
+  overflow: clip;
 }
 
 .lenis.lenis-smooth iframe {

diff --git a/packages/react/src/provider.tsx b/packages/react/src/provider.tsx
@@ -26,7 +26,14 @@ export const rootLenisContextStore = new Store<LenisContextValue | null>(null)
  */
 export const ReactLenis = forwardRef<LenisRef, LenisProps>(
   (
-    { children, root = false, options = {}, className, props }: LenisProps,
+    {
+      children,
+      root = false,
+      options = {},
+      className,
+      autoRaf = true,
+      props,
+    }: LenisProps,
     ref
   ) => {
     const wrapperRef = useRef<HTMLDivElement | null>(null)
@@ -53,6 +60,7 @@ export const ReactLenis = forwardRef<LenisRef, LenisProps>(
           wrapper: wrapperRef.current!,
           content: contentRef.current!,
         }),
+        autoRaf: options?.autoRaf ?? autoRaf, // this is to avoid breaking the autoRaf prop if it's still used (require breaking change)
       })
 
       setLenis(lenis)

diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
@@ -21,13 +21,9 @@ export type LenisProps = {
   /**
    * Auto-setup requestAnimationFrame
    * @default true
+   * @deprecated use options.autoRaf instead
    */
   autoRaf?: boolean
-  /**
-   * RequestAnimationFrame priority
-   * @default 0
-   */
-  rafPriority?: number
   /**
    * Children
    */

diff --git a/playground/react/app.tsx b/playground/react/app.tsx
@@ -1,6 +1,6 @@
-import ReactLenis, { useLenis } from 'lenis/react'
+import { ReactLenis, useLenis } from 'lenis/react'
 import { LoremIpsum } from 'lorem-ipsum'
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 
 function App() {
   const [lorem] = useState(() => new LoremIpsum().generateParagraphs(200))
@@ -11,27 +11,22 @@ function App() {
 
   const lenisRef = useRef()
 
-  useEffect(() => {
-    console.log('lenis ref', lenisRef.current)
+  // useEffect(() => {
+  //   console.log('lenis ref', lenisRef.current)
 
-    function raf(time: number) {
-      lenisRef.current?.lenis?.raf(time)
-    }
+  //   function raf(time: number) {
+  //     lenisRef.current?.lenis?.raf(time)
+  //   }
 
-    const rafId = requestAnimationFrame(raf)
+  //   const rafId = requestAnimationFrame(raf)
 
-    return () => cancelAnimationFrame(rafId)
-  }, [lenis])
+  //   return () => cancelAnimationFrame(rafId)
+  // }, [lenis])
 
   return (
     <>
       {/* <ReactLenis root /> */}
-      <ReactLenis
-        className="wrapper"
-        root
-        options={{ autoRaf: true }}
-        ref={lenisRef}
-      >
+      <ReactLenis className="wrapper" root ref={lenisRef}>
         {lorem}
       </ReactLenis>
     </>