docs: refactoring docs to docusaurus

Author: jscottsmith

docs/parallax-controller-context.md

@@ -8,4 +8,4 @@ sidebar_position: 1
 
 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements. Utilizes [Parallax Controller](https://github.com/jscottsmith/parallax-controller) to add vertical or horizontal scrolling based effects to elements. [Optimized](https://parallax-controller.vercel.app/docs/performance) to _reduce_ jank on scroll and works with SSR and SSG rendered React apps.
 
-If you're coming from [V2](https://github.com/jscottsmith/react-scroll-parallax/tree/v2.4.2), here's a [migration guide](https://github.com/jscottsmith/react-scroll-parallax/blob/master/docs/migration-guide.md).
+If you're coming from [V2](https://github.com/jscottsmith/react-scroll-parallax/tree/v2.4.2), here's a [migration guide](/docs/usage/migration-guide).

documentation/docs/intro.md

@@ -0,0 +1,4 @@
+{
+  "label": "Migration Guides",
+  "position": 2
+}

documentation/docs/migration-guides/_category_.json

@@ -1,38 +1,3 @@
-# V2 Migration Guide
-
-With mostly just new features, V3 also makes a few breaking changes. See the following and migrate any code that is affected.
-
-### Renamed Props for \<Parallax\>
-
-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. `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.
-
-The hook to access the parallax controller is now returned directly.
-
-If you used the following:
-
-```js
-const { parallaxController } = useController();
-```
-
-change it to:
-
-```js
-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 refactor or set them manually.
-
 # V1 Migration Guide
 
 Some breaking changes were introduced in v2. Here's the simple changes that need to be made if you're coming from v1.

docs/migration-guide.md renamed to documentation/docs/migration-guides/v1-migration-guide.md

@@ -0,0 +1,34 @@
+# V2 Migration Guide
+
+With mostly just new features, V3 also makes a few breaking changes. See the following and migrate any code that is affected.
+
+### Renamed Props for <Parallax\>
+
+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. `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 useController hook.
+
+The hook to access the parallax controller is now returned directly.
+
+If you used the following:
+
+```js
+const { parallaxController } = useController();
+```
+
+change it to:
+
+```js
+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 refactor or set them manually.

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

@@ -0,0 +1,4 @@
+{
+  "label": "Usage",
+  "position": 1
+}

documentation/docs/usage/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Components",
+  "position": 2
+}

documentation/docs/usage/components/_category_.json

@@ -1,4 +1,4 @@
-# \<ParallaxBanner>
+# 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.
 

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

@@ -1,4 +1,4 @@
-# \<Parallax>
+# Parallax
 
 The main component for applying scroll effects based on an elements position within the viewport.
 

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

@@ -1,4 +1,4 @@
-# \<ParallaxProvider>
+# ParallaxProvider
 
 The `<ParallaxProvider />` component is meant to wrap a top level component in your application and is necessary to provide access though React context API to the parallax controller. 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:
 

docs/parallax-provider-component.md renamed to documentation/docs/usage/components/parallax-provider.md

@@ -0,0 +1,4 @@
+{
+  "label": "Hooks",
+  "position": 1
+}

documentation/docs/usage/hooks/_category_.json

@@ -0,0 +1,39 @@
+# useController
+
+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
+
+Updating the `ParallaxController` cache once an image loads:
+
+```tsx
+import { useController } from 'react-scroll-parallax';
+
+function Image(props) {
+  const parallaxController = useController();
+
+  // updates cached values after image dimensions have loaded
+  const handleLoad = () => parallaxController.update();
+
+  return <img src={props.src} onLoad={handleLoad} />;
+}
+```
+
+## 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.
+
+```tsx
+function useUpdateControllerOnRouteChange() {
+  const location = useLocation();
+  const parallaxController = useController();
+
+  useEffect(() => {
+    parallaxController.update();
+  }, [location.pathname]);
+}
+```
+
+### Parallax Controller
+
+See the `parallax-controller` [documentation](https://parallax-controller.vercel.app/docs/api/parallax-controller/) of all the methods that can be called from the controller

documentation/docs/usage/hooks/use-controller.md

@@ -1,4 +1,6 @@
-# Hook useParallax()
+# useParallax
+
+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