allow custom props on ParallaxBanner layers #81

Author: jscottsmith

__tests__/ParallaxBanner.test.js

@@ -134,4 +134,31 @@ describe('Expect the <ParallaxBanner> component', () => {
 
         expect(childFn).toBeCalled();
     });
+
+    it('to render layers with custom props', () => {
+        const tree = renderer
+            .create(
+                <ParallaxProvider>
+                    <ParallaxBanner
+                        layers={[
+                            {
+                                amount: 0.2,
+                                props: {
+                                    style: {
+                                        backgroundColor: 'red',
+                                    },
+                                    className: 'my-custom-class',
+                                    id: 'my-id',
+                                },
+                            },
+                        ]}
+                    />
+                </ParallaxProvider>,
+                {
+                    createNodeMock,
+                }
+            )
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
 });

__tests__/__snapshots__/ParallaxBanner.test.js.snap

@@ -122,6 +122,61 @@ exports[`Expect the <ParallaxBanner> component to render image banners correctly
 </div>
 `;
 
+exports[`Expect the <ParallaxBanner> component to render layers with custom props 1`] = `
+<div
+  className="parallax-banner"
+  style={
+    Object {
+      "height": "50vh",
+      "overflow": "hidden",
+      "position": "relative",
+      "width": "100%",
+    }
+  }
+>
+  <div
+    className="parallax-outer"
+    style={
+      Object {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <div
+      className="parallax-inner"
+      style={
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <div
+        className="parallax-banner-layer-0 my-custom-class"
+        id="my-id"
+        style={
+          Object {
+            "backgroundColor": "red",
+            "bottom": "-20%",
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": "-20%",
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Expect the <ParallaxBanner> component to render without expanded margins 1`] = `
 <div
   className="parallax-banner"

src/components/ParallaxBanner.js

@@ -25,16 +25,42 @@ const ParallaxBanner = ({ children, className, layers, style, disabled }) => {
         >
             {layers.map(
                 (
-                    { image, amount, children: layerChildren, expanded = true },
+                    {
+                        amount,
+                        children: layerChildren,
+                        expanded = true,
+                        image,
+                        props = {},
+                    },
                     i
                 ) => {
+                    // save props to be merged
+                    const layerStyle = props.style || {};
+                    const layerClass = props.className || '';
+
+                    // remove from pass through props
+                    delete props.style;
+                    delete props.className;
+
+                    const layerClassMerged = `parallax-banner-layer-${i}${
+                        layerClass ? ` ${layerClass}` : ''
+                    }`;
+
                     // if this is an expanded layer overwrite the top/bottom styles with negative margins
                     const expandedStyle = expanded
                         ? {
                               top: Math.abs(amount) * 100 * -1 + '%',
                               bottom: Math.abs(amount) * 100 * -1 + '%',
                           }
                         : {};
+                    // optional image styles
+                    const imageStyle = image
+                        ? {
+                              backgroundImage: `url(${image})`,
+                              backgroundPosition: 'center',
+                              backgroundSize: 'cover',
+                          }
+                        : {};
 
                     return (
                         <Parallax
@@ -44,28 +70,18 @@ const ParallaxBanner = ({ children, className, layers, style, disabled }) => {
                             styleOuter={absoluteStyle}
                             disabled={disabled}
                         >
-                            {image ? (
-                                <div
-                                    className={`parallax-banner-layer-${i}`}
-                                    style={{
-                                        backgroundImage: `url(${image})`,
-                                        backgroundPosition: 'center',
-                                        backgroundSize: 'cover',
-                                        ...absoluteStyle,
-                                        ...expandedStyle,
-                                    }}
-                                />
-                            ) : (
-                                <div
-                                    className={`parallax-banner-layer-${i}`}
-                                    style={{
-                                        ...absoluteStyle,
-                                        ...expandedStyle,
-                                    }}
-                                >
-                                    {layerChildren}
-                                </div>
-                            )}
+                            <div
+                                className={layerClassMerged}
+                                style={{
+                                    ...imageStyle,
+                                    ...absoluteStyle,
+                                    ...expandedStyle,
+                                    ...layerStyle,
+                                }}
+                                {...props}
+                            >
+                                {layerChildren}
+                            </div>
                         </Parallax>
                     );
                 }
@@ -89,6 +105,7 @@ ParallaxBanner.propTypes = {
             children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
             expanded: PropTypes.bool,
             image: PropTypes.string,
+            props: PropTypes.object,
         })
     ),
     style: PropTypes.object,