feat: handle composed ParallaxBannerLayers as children; add story demonstration #147

Author: jscottsmith

src/components/ParallaxBanner/components/ParallaxBannerLayer.tsx

@@ -14,7 +14,7 @@ const absoluteStyle: CSSProperties = {
 };
 
 export const ParallaxBannerLayer = (
-  props: BannerLayer & { testId: string }
+  props: BannerLayer & { testId?: string }
 ) => {
   const { parallaxProps, rest } = getIsolatedParallaxProps(props);
   const {

src/components/ParallaxBanner/index.tsx

@@ -4,6 +4,7 @@ import React, {
   useEffect,
   useRef,
   useState,
+  ReactElement,
 } from 'react';
 import { ParallaxBannerLayer } from './components/ParallaxBannerLayer';
 import { ParallaxBannerProps } from './types';
@@ -17,9 +18,8 @@ const containerStyle: CSSProperties = {
 export const ParallaxBanner = (
   props: PropsWithChildren<ParallaxBannerProps>
 ) => {
-  const [targetElement, setTargetElement] = useState<HTMLDivElement | null>(
-    null
-  );
+  const [targetElement, setTargetElement] =
+    useState<HTMLDivElement | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     setTargetElement(containerRef.current);
@@ -30,24 +30,52 @@ export const ParallaxBanner = (
     layers = [],
     ...rootRest
   } = props;
+
+  function renderLayers() {
+    if (targetElement) {
+      const shouldUseLayers = layers && layers.length > 0;
+      if (shouldUseLayers) {
+        return layers.map((layer, i) => (
+          <ParallaxBannerLayer
+            {...layer}
+            targetElement={targetElement}
+            key={`layer-${i}`}
+            testId={`layer-${i}`}
+          />
+        ));
+      }
+    }
+    return null;
+  }
+
+  function renderChildren() {
+    if (targetElement) {
+      return React.Children.map(props.children, (child) => {
+        const item = child as ReactElement<
+          PropsWithChildren<{ targetElement: any }>
+        >;
+        // adds the targetElement prop to any ParallaxBannerLayer components
+        if (item.type === ParallaxBannerLayer) {
+          const clone = React.cloneElement(item, {
+            targetElement,
+          });
+          return clone;
+        }
+        return child;
+      });
+    }
+    return null;
+  }
   return (
     <div
       ref={containerRef}
       style={{ ...containerStyle, ...rootStyle }}
       {...rootRest}
     >
-      {layers.map(
-        (layer, i) =>
-          targetElement && (
-            <ParallaxBannerLayer
-              {...layer}
-              targetElement={targetElement}
-              key={`layer-${i}`}
-              testId={`layer-${i}`}
-            />
-          )
-      )}
-      {props.children}
+      {/* Using the `layers` prop to define children */}
+      {renderLayers()}
+      {/* Using children to compose layers */}
+      {renderChildren()}
     </div>
   );
 };

stories/ParallaxBanner/4_ParallaxBanner.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ParallaxBanner, ParallaxProvider } from '../../src';
+import { ParallaxBannerLayer } from '../../src/components/ParallaxBanner/components/ParallaxBannerLayer';
 import styles from './ParallaxBanner.module.scss';
 
 const Log = () => {
@@ -28,7 +29,7 @@ const Log = () => {
 
 const Wrapper = (props) => (
   <ParallaxProvider>
-    <Log />
+    {/* <Log /> */}
     <div style={{ height: '300vh' }} className="vertical">
       <div className={styles.bannerContainer}>{props.children}</div>
     </div>
@@ -110,6 +111,25 @@ export const WithMultipleBackground = () => (
   </Wrapper>
 );
 
+export const WithMultipleBackgroundsUsingBannerLayerComponents = () => (
+  <Wrapper>
+    <ParallaxBanner
+      className={styles.bannerBg}
+      style={{ aspectRatio: '2 / 1' }}
+    >
+      <ParallaxBannerLayer
+        image="https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-background.jpg"
+        speed={-20}
+      />
+      <ParallaxBannerLayer
+        image="https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-foreground.png"
+        speed={-10}
+      />
+      <div>nope</div>
+    </ParallaxBanner>
+  </Wrapper>
+);
+
 export const WithAVideo = () => (
   <Wrapper>
     <ParallaxBanner