docs: update docs about Parallax component props

Author: jscottsmith

documentation/docs/migration-guides/v2-migration-guide.md

@@ -10,11 +10,11 @@ With mostly just new features, V3 also makes a few breaking changes. See the fol
 
 If you've used any of the following props rename to new ones, or refactor if they are no longer supported.
 
-1. `styleOuter` becomes `style`.
-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.
+1. `x` becomes `translateX`.
+2. `y` becomes `translateY`.
+3. `styleOuter` becomes `style`.
+4. `styleInner` is no longer supported - There's only a single element returned by the component.
+5. `tagOuter` is no longer supported - If you need a custom element use the `useParallax` hook instead.
 6. `tagInner` is no longer supported - There's only a single element returned by the component.
 
 ### Using the useController hook.

documentation/docs/usage/components/parallax-banner-component.md

@@ -1,3 +1,7 @@
+---
+sidebar_position: 3
+---
+
 # ParallaxBanner
 
 Component that utilizes `<Parallax>` components to achieve a parallaxing banner effect. Allows a single or multiple images to be parallaxed at different rates within the banner area.

documentation/docs/usage/components/parallax-component.md

@@ -1,3 +1,7 @@
+---
+sidebar_position: 1
+---
+
 # Parallax
 
 The main component for applying scroll effects based on an elements position within the viewport.
@@ -6,6 +10,34 @@ The main component for applying scroll effects based on an elements position wit
 import { Parallax } from 'react-scroll-parallax';
 ```
 
+## Props
+
+All props to configure the parallax element, like CSS effects, are documented and managed by the `parallax-controller`.
+
+[See all the parallax props](https://parallax-controller.vercel.app/docs/usage/props) that this component will accept.
+
+### Non Parallax Props
+
+All other non-parallax props will be passed through to the `<div>`. Example with `style` and `className`:
+
+```tsx
+<Parallax style={{ background: 'blue' }} className="test" />
+```
+
+```html
+<div style="background:'blue'" className="test"></div>
+```
+
+### Children
+
+Children are also accepted and rendered
+
+```tsx
+<Parallax>
+  <h1>Hello</h1>
+</Parallax>
+```
+
 ## Examples
 
 Some basic example of how to use the `<Parallax>` component.
@@ -50,21 +82,3 @@ const TranslateY = () => (
 Translate values without units default to `%` so `-20` becomes `-20%`.
 
 :::
-
-## Props
-
-### Props: Effects
-
-Most props to configure a parallax element like CSS effects are documented and managed by the `parallax-controller`.
-
-[See all the parallax props](https://parallax-controller.vercel.app/docs/usage/props) that this component will accept.
-
-### Props: Component Configuration
-
-The following props allow some configuration of the react component:
-
-| Name          |   Type   | Default | Description                                                            |
-| ------------- | :------: | :------ | ---------------------------------------------------------------------- |
-| **className** | `string` |         | Class names to be added to the outermost parallax element.             |
-| **style**     | `object` |         | Style object to be added to the outermost parallax element.            |
-| **tag**       | `string` | `div`   | HTML element tag name to be applied to the outermost parallax element. |

documentation/docs/usage/components/parallax-provider.md

@@ -1,3 +1,7 @@
+---
+sidebar_position: 2
+---
+
 # ParallaxProvider
 
 The `<ParallaxProvider />` component is meant to wrap a root level component in your application and is necessary to provide access through the React context API to the [Parallax Controller](https://parallax-controller.vercel.app/docs/intro).