fix: handle ParallaxLayers inside fragments (#1667) (#1671)

* fix: add check for React.Fragment children

* refactor: make child mapping a resursive function

* docs: add note about direct children of Parallax

Co-authored-by: Josh <[email protected]>

Author: kindoflew

docs/src/pages/components/parallax.mdx

@@ -59,6 +59,7 @@ import { Parallax, ParallaxLayer } from '@react-spring/parallax'
 
 ### Usage Notes
 
+- All direct `children` of `Parallax` must be `ParallaxLayer`s (or `fragment`s whose only direct `children` are `ParallaxLayer`s).
 - `Parallax` is a scrollable container so all scroll events are fired from the container itself -- listening for scroll on `window` won't work.
 - `scrollTo` is a method on `Parallax` -- you access it with a `ref` and then `ref.current.scrollTo(pageNumber)`.
 

packages/parallax/src/index.tsx

@@ -14,6 +14,24 @@ function getScrollType(horizontal: boolean) {
   return horizontal ? 'scrollLeft' : 'scrollTop'
 }
 
+function mapChildrenRecursive(
+  children: React.ReactNode,
+  callback: Function
+): React.ReactNode {
+  const isReactFragment = (node: any) => {
+    if (node.type) {
+      return node.type === React.Fragment
+    }
+    return node === React.Fragment
+  }
+
+  return React.Children.map(children, (child: any) =>
+    isReactFragment(child)
+      ? mapChildrenRecursive(child.props.children, callback)
+      : callback(child)
+  )
+}
+
 const START_TRANSLATE_3D = 'translate3d(0px,0px,0px)'
 const START_TRANSLATE = 'translate(0px,0px)'
 
@@ -339,14 +357,14 @@ export const Parallax = React.memo(
                 ...props.innerStyle,
               }}>
               <ParentContext.Provider value={state}>
-                {React.Children.map(
+                {mapChildrenRecursive(
                   children,
                   (child: any) => !child.props.sticky && child
                 )}
               </ParentContext.Provider>
             </a.div>
             <ParentContext.Provider value={state}>
-              {React.Children.map(
+              {mapChildrenRecursive(
                 children,
                 (child: any) => child.props.sticky && child
               )}