feat: return a single element from <Parallax>, remove unused inner element props

Author: jscottsmith

docs/migration-guide.md

@@ -2,16 +2,16 @@
 
 With mostly just new features, V3 also makes a few breaking changes. See the following and migrate any code that is affected.
 
-### Renamed Props
+### Renamed Props for \<Parallax\>
 
-If you've used any of the following props simply rename to the new ones.
+If you've used any of the following props simply rename to new ones or refactor if if they are no longer supported.
 
 1. `styleOuter` becomes `style`.
-2. `styleInner` becomes `innerStyle`.
-3. `tagOuter` becomes `tag`.
-4. `tagInner` becomes `innerTag`.
-5. `x` becomes `translateX`.
-6. `y` becomes `translateY`.
+2. `tagOuter` becomes `tag`.
+3. `x` becomes `translateX`.
+4. `y` becomes `translateY`.
+5. `styleInner` is no longer supported - There's only a single element returned by the component.
+6. `tagInner` is no longer supported - There's only a single element returned by the component.
 
 ### Using the context hook.
 
@@ -31,11 +31,7 @@ const parallaxController = useController();
 
 ### Removed default class names
 
-If you relied on either the `parallax-outer` or `parallax-inner` class names for styling you will need to explicitly define them.
-
-```jsx
-<Parallax className="parallax-outer" innerClassName="parallax-inner" />
-```
+If you relied on either the `parallax-outer` or `parallax-inner` class names for styling you will need to refactor or set them manually.
 
 # V1 Migration Guide
 

docs/parallax-component.md

@@ -58,11 +58,8 @@ The following are all props that can be passed to the `<Parallax>` component:
 | **rootMargin**                        |        `object`        |         | Margin to be applied as the bounds around an element. This will affect when an element is determined to be considered in the viewport. Example: `{ top: 100, right: 100, bottom: 100, left: 100 }` |
 | **disabled**                          |       `boolean`        | `false` | Disables parallax effects on individual elements when `true`.                                                                                                                                      |
 | **className**                         |        `string`        |         | Class names to be added to the outermost parallax element.                                                                                                                                         |
-| **innerClassName**                    |        `string`        |         | Class names to be added to the outermost parallax element.                                                                                                                                         |
 | **style**                             |        `object`        |         | Style object to be added to the outermost parallax element.                                                                                                                                        |
-| **innerStyle**                        |        `object`        |         | Style object to be added to the innermost parallax element.                                                                                                                                        |
 | **tag**                               |        `string`        | `div`   | HTML element tag name to be applied to the outermost parallax element.                                                                                                                             |
-| **innerTag**                          |        `string`        | `div`   | HTML element tag name to be applied to the innermost parallax element.                                                                                                                             |
 | **shouldStartAnimationInitialInView** |       `boolean`        | `false` | Will start the animation at initial element position if the element is positioned inside the view when scroll is at zero.                                                                          |
 | **startScroll**                       |        `number`        |         | Scroll top value to begin the animation. When provided along with `endScroll` relative scroll values will be ignored.                                                                              |
 | **endScroll**                         |        `number`        |         | Scroll top value to end the animation. When provided along with `startScroll` relative scroll values will be ignored.                                                                              |

src/components/Parallax/index.tsx

@@ -3,33 +3,16 @@ import { useParallax } from '../../hooks/useParallax';
 import { ParallaxProps } from '../../types';
 
 export function Parallax(props: PropsWithChildren<ParallaxProps>) {
-  const Outer = props.tag;
-  const Inner = props.innerTag;
+  const Tag = props.tag;
   const { ref } = useParallax(props);
   return (
-    <Outer className={props.className} style={props.style}>
-      <Inner
-        className={props.innerClassName}
-        ref={ref}
-        style={props.innerStyle}
-      >
-        {props.children}
-      </Inner>
-    </Outer>
+    <Tag className={props.className} style={props.style} ref={ref}>
+      {props.children}
+    </Tag>
   );
 }
 
-export const Component = () => {
-  const { ref } = useParallax<HTMLDivElement>({ translateY: [100, -100] });
-  return (
-    <div ref={ref}>
-      <div />
-    </div>
-  );
-};
-
 Parallax.defaultProps = {
   disabled: false,
-  innerTag: 'div',
   tag: 'div',
 };

src/types.ts

@@ -14,22 +14,10 @@ export interface ParallaxProps extends ParallaxElementConfig {
    * Class names to be added to the outermost parallax element.
    */
   className?: string;
-  /**
-   * Class names to be added to the outermost parallax element.
-   */
-  innerClassName?: string;
-  /**
-   * Style object to be added to the innermost parallax element.
-   */
-  innerStyle?: any;
   /**
    * Style object to be added to the outermost parallax element.
    */
   style?: any;
-  /**
-   * HTML element tag name to be applied to the innermost parallax element.
-   */
-  innerTag?: any;
   /**
    * HTML element tag name to be applied to the outermost parallax element.
    */