docs: parallax provider doc updates and examples

jscottsmith · jscottsmith · commit 79564a750076 · 2022-01-15T12:40:36.000-08:00
diff --git a/documentation/docs/usage/components/parallax-component.md b/documentation/docs/usage/components/parallax-component.md
@@ -27,7 +27,7 @@ const SlowAndFast = () => (
 );
 ```
 
-**NOTE:** The `speed` prop simplifies the application of a `translateX` or `translateY` effect based on the `ParallaxController` scroll axis [TODO](#link)
+**NOTE:** The `speed` prop simplifies the application of a `translateX` or `translateY` effect based on the `ParallaxController` scroll axis – [See <ParallaxProvider\> Props](/docs/usage/components/parallax-provider#parallaxprovider-props)
 
 ## Translate Controls
 
diff --git a/documentation/docs/usage/components/parallax-provider.md b/documentation/docs/usage/components/parallax-provider.md
@@ -1,8 +1,14 @@
 # ParallaxProvider
 
-The `<ParallaxProvider />` component is meant to wrap a top 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). This component should only be used once in you app, for instance in an `<AppContainer />` component that won't be mounted/unmounted during route changes. Like so:
+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).
+
+## Basic Example
+
+This component should only be used once in you app, for instance in an `<AppContainer />` component that won't be mounted/unmounted during route changes. Like so:
+
+```tsx
+import { ParallaxProvider } from 'react-scroll-parallax';
 
-```jsx
 const AppContainer = () => (
   <ParallaxProvider>
     <Router>
@@ -12,11 +18,38 @@ const AppContainer = () => (
 );
 ```
 
+**NOTE:** You can have multiple providers, however they will all be independent instances of a `ParallaxController`. It's recommended to only use one when possible.
+
 ## ParallaxProvider Props
 
 The following props configure the `<ParallaxProvider>` component:
 
-| Name                |     Type      | Default    | Description                                                                                                  |
-| ------------------- | :-----------: | :--------- | ------------------------------------------------------------------------------------------------------------ |
-| **scrollAxis**      |   `string`    | `vertical` | Optionally pass the scroll axis for setting horizontal/vertical scrolling. One of `vertical` or `horizontal` |
-| **scrollContainer** | `HTMLElement` | `<body>`   | Optionally set the container that has overflow and will contain parallax elements. Defaults to the HTML body |
+| Name                |     Type      | Default    | Description                                                                                                              |
+| ------------------- | :-----------: | :--------- | ------------------------------------------------------------------------------------------------------------------------ |
+| **scrollAxis**      |   `string`    | `vertical` | Optionally pass the scroll axis for setting horizontal/vertical scrolling. One of `vertical` or `horizontal`             |
+| **scrollContainer** | `HTMLElement` | `<body>`   | Optionally set the container that has overflow and will contain parallax elements. Defaults to the document scroll body. |
+
+## Example: Scroll Container
+
+By default the <ParallaxProvider\> defaults to the document scrolling element. If your app's overflow is a unique element you need to provide the element as the `scrollContainer`. Here's how:
+
+```tsx
+import * as React from 'react';
+import { ParallaxProvider } from 'react-scroll-parallax';
+
+const ScrollContainer = () => {
+  const [scrollEl, setScrollElement] = React.useState(null);
+  const ref = React.useRef<HTMLDivElement>();
+  React.useEffect(() => {
+    setScrollElement(ref.current);
+  });
+
+  return (
+    <div className="your-scroll-container" ref={ref}>
+      <ParallaxProvider scrollContainer={scrollEl}>
+        {props.children}
+      </ParallaxProvider>
+    </div>
+  );
+};
+```
