react forward style

darkroomengineering · Jan 9, 2025 · 4f26f63 · 4f26f63
1 parent 9cfa597
commit 4f26f63
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/packages/react/src/provider.tsx b/packages/react/src/provider.tsx
@@ -32,6 +32,7 @@ export const ReactLenis = forwardRef<LenisRef, LenisProps>(
       options = {},
       className,
       autoRaf = true,
+      style,
       props,
     }: LenisProps,
     ref
@@ -129,7 +130,7 @@ export const ReactLenis = forwardRef<LenisRef, LenisProps>(
         {root ? (
           children
         ) : (
-          <div ref={wrapperRef} className={className} {...props}>
+          <div ref={wrapperRef} className={className} style={style} {...props}>
             <div ref={contentRef}>{children}</div>
           </div>
         )}

diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
@@ -1,6 +1,6 @@
 import type Lenis from 'lenis'
 import type { LenisOptions, ScrollCallback } from 'lenis'
-import type { ComponentPropsWithoutRef, ReactNode } from 'react'
+import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react'
 
 export type LenisContextValue = {
   lenis: Lenis
@@ -34,6 +34,12 @@ export type LenisProps = {
    * When `root` is `false`, this will be applied to the wrapper div
    */
   className?: string
+  /**
+   * Style for the wrapper div
+   *
+   * When `root` is `false`, this will be applied to the wrapper div
+   */
+  style?: CSSProperties
   /**
    * Additional props for the wrapper div
    *

diff --git a/playground/react/app.tsx b/playground/react/app.tsx
@@ -26,7 +26,12 @@ function App() {
   return (
     <>
       {/* <ReactLenis root /> */}
-      <ReactLenis className="wrapper" root ref={lenisRef}>
+      <ReactLenis
+        className="wrapper"
+        // root
+        ref={lenisRef}
+        style={{ height: '100vh', overflowY: 'auto' }}
+      >
         {lorem}
       </ReactLenis>
     </>

diff --git a/playground/react/style.css b/playground/react/style.css
@@ -1,4 +1,4 @@
-.lenis {
+/* .lenis {
   height: 100vh;
   overflow-y: auto;
-}
+} */