docs: adding consistent imports and rewording headings for consistency

jscottsmith · jscottsmith · commit 1eae9b701ef9 · 2022-01-24T23:07:10.000-08:00
diff --git a/documentation/docs/usage/components/parallax-banner-component.md b/documentation/docs/usage/components/parallax-banner-component.md
@@ -6,6 +6,10 @@ sidebar_position: 3
 
 Component that sets up layers of `useParallax` elements to achieve a parallaxing banner. Enables the layering of images, or custom markup, with scroll effects in a container that hides overflow.
 
+```tsx
+import { ParallaxBanner } from 'react-scroll-parallax';
+```
+
 ### Working Demos
 
 See some example [code with demos](/docs/examples/banners).
diff --git a/documentation/docs/usage/components/parallax-provider.md b/documentation/docs/usage/components/parallax-provider.md
@@ -6,13 +6,15 @@ sidebar_position: 2
 
 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
+```tsx
+import { ParallaxProvider } from 'react-scroll-parallax';
+```
+
+## Examples
 
 This component should only be used once in your 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';
-
 const AppContainer = () => (
   <ParallaxProvider>
     <Router>
@@ -28,7 +30,7 @@ You can have multiple providers, however they will all be independent instances
 
 :::
 
-## ParallaxProvider Props
+## Props
 
 The following props configure the `<ParallaxProvider>` component:
 
@@ -37,9 +39,29 @@ The following props configure the `<ParallaxProvider>` component:
 | **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
+## More Examples
+
+Using props you can configure the provider for the following conditions.
+
+### Horizontal Scrolling
+
+If your app's overflow is horizontal, you'll need to change the `scrollAxis`:
+
+```tsx
+const AppContainer = () => (
+  <ParallaxProvider scrollAxis="horizontal">
+    <Router>
+      <App />
+    </Router>
+  </ParallaxProvider>
+);
+```
+
+### Scroll Container
+
+By default the `<ParallaxProvider>` uses the document scrolling element. If your app's overflow is a unique element you need to provide the element as the `scrollContainer`.
 
-By default the `<ParallaxProvider>` uses 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:
+Here's how you can do that using React hooks to set a `ref` to a DOM element. The `useEffect` will be called once after mounting then update state with the element to be passed to the provider.
 
 ```tsx title="ScrollContainer.tsx"
 import * as React from 'react';
diff --git a/documentation/docs/usage/hooks/use-parallax-controller.md b/documentation/docs/usage/hooks/use-parallax-controller.md
@@ -2,13 +2,19 @@
 
 This hook provides you access to the [`ParallaxController`](https://parallax-controller.vercel.app/docs/api/parallax-controller/) via [React context](https://facebook.github.io/react/docs/context.html). The hook must be called in a component rendered within the [`<ParallaxProvider>`](/docs/usage/components/parallax-provider). The most common usage of the controller is to update cache if the page layout has changed.
 
-## Example Usage For Images
+```tsx
+import { useParallaxController } from 'react-scroll-parallax';
+```
+
+## Examples
+
+The following are some common scenarios that occur where you may need to access and update the controller.
+
+### Usage For Images
 
 Updating the `ParallaxController` cache once an image loads:
 
 ```tsx
-import { useParallaxController } from 'react-scroll-parallax';
-
 function Image(props) {
   const parallaxController = useParallaxController();
 
@@ -19,7 +25,7 @@ function Image(props) {
 }
 ```
 
-## Example Route Change Hook
+### Example Route Change Hook
 
 Another common use case is the need to update cache after a route changes. This custom hook updates the controller each time the location changes.
 
diff --git a/documentation/docs/usage/hooks/use-parallax.md b/documentation/docs/usage/hooks/use-parallax.md
@@ -2,13 +2,15 @@
 
 Main hook for applying parallax effects to a DOM element. Any of the documented [effects and configurations](https://parallax-controller.vercel.app/docs/usage/props) can be passed as params to the hook.
 
-## Example Usage
+```tsx
+import { useParallax } from 'react-scroll-parallax';
+```
+
+## Example
 
 To use the hook assign the `ref` returned to the element that you would like to apply effects to. Then provide the hook with the [prop configuration](https://parallax-controller.vercel.app/docs/usage/props) for the effects you need.
 
 ```tsx
-import { useParallax } from 'react-scroll-parallax';
-
 function Component() {
   const props = { speed: 10 };
   const { ref } = useParallax<HTMLDivElement>(props);
