chore: rename useController to useParallaxController

Author: jscottsmith

README.md

@@ -41,7 +41,7 @@ yarn add react-scroll-parallax@beta
 ### Docs: Hooks
 
 - [`useParallax()`](https://react-scroll-parallax.v3.damnthat.tv/docs/usage/hooks/use-parallax)
-- [`useController()`](https://react-scroll-parallax.v3.damnthat.tv/docs/usage/hooks/use-controller)
+- [`useParallaxController()`](https://react-scroll-parallax.v3.damnthat.tv/docs/usage/hooks/use-parallax-controller)
 
 ### Docs: Components
 

documentation/docs/intro.mdx

@@ -50,7 +50,7 @@ yarn add react-scroll-parallax@beta
 ### Docs: Hooks
 
 - [`useParallax()`](/docs/usage/hooks/use-parallax)
-- [`useController()`](/docs/usage/hooks/use-controller)
+- [`useParallaxController()`](/docs/usage/hooks/use-controller)
 
 ### Docs: Components
 

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

@@ -1,3 +1,7 @@
+---
+sidebar_position: 2
+---
+
 # 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.

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

@@ -1,10 +1,14 @@
+---
+sidebar_position: 1
+---
+
 # 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.
 
 ### Prop changes 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.
+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`.
@@ -15,7 +19,8 @@ If you've used any of the following props simply rename to new ones or refactor
 
 ### Using the useController hook.
 
-The hook to access the parallax controller is now returned directly.
+1. The hook `useController` has been renamed to `useParallaxController`.
+2. The hook returns the instance of the controller directly.
 
 If you used the following:
 
@@ -26,7 +31,7 @@ const { parallaxController } = useController();
 change it to:
 
 ```js
-const parallaxController = useController();
+const parallaxController = useParallaxController();
 ```
 
 ### Removed default class names

documentation/docs/usage/hooks/hooks.md

@@ -4,10 +4,10 @@ All provided React hooks.
 
 ```ts
 import { useParallax } from 'react-scroll-parallax';
-import { useController } from 'react-scroll-parallax';
+import { useParallaxController } from 'react-scroll-parallax';
 ```
 
 ## Documentation
 
 - [`useParallax()`](/docs/usage/hooks/use-parallax)
-- [`useController()`](/docs/usage/hooks/use-controller)
+- [`useParallaxController()`](/docs/usage/hooks/use-parallax-controller)

…ation/docs/usage/hooks/use-controller.md …s/usage/hooks/use-parallax-controller.mddocumentation/docs/usage/hooks/use-controller.md renamed to documentation/docs/usage/hooks/use-parallax-controller.md documentation/docs/usage/hooks/use-controller.md renamed to documentation/docs/usage/hooks/use-parallax-controller.md

@@ -1,4 +1,4 @@
-# useController
+# useParallaxController
 
 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.
 
@@ -7,10 +7,10 @@ This hook provides you access to the [`ParallaxController`](https://parallax-con
 Updating the `ParallaxController` cache once an image loads:
 
 ```tsx
-import { useController } from 'react-scroll-parallax';
+import { useParallaxController } from 'react-scroll-parallax';
 
 function Image(props) {
-  const parallaxController = useController();
+  const parallaxController = useParallaxController();
 
   // updates cached values after image dimensions have loaded
   const handleLoad = () => parallaxController.update();
@@ -26,7 +26,7 @@ Another common use case is the need to update cache after a route changes. This
 ```tsx
 function useUpdateControllerOnRouteChange() {
   const location = useLocation();
-  const parallaxController = useController();
+  const parallaxController = useParallaxController();
 
   useEffect(() => {
     parallaxController.update();

documentation/docs/usage/usage.md

@@ -88,11 +88,11 @@ Depending on your app setup, you may need to update the [Parallax Controller](ht
 ```tsx
 import { useEffect } from 'react';
 import { useLocation } from '@reach/router';
-import { useController } from 'react-scroll-parallax';
+import { useParallaxController } from 'react-scroll-parallax';
 
 function useUpdateControllerOnRouteChange() {
   const location = useLocation();
-  const parallaxController = useController();
+  const parallaxController = useParallaxController();
 
   useEffect(() => {
     parallaxController.update();
@@ -110,10 +110,10 @@ const ParallaxRouteUpdate = () => {
 Often times images impact the position of content on the page. This is another common scenario that will require updating the cache which can be done using an `onLoad` event.
 
 ```tsx
-import { useController } from 'react-scroll-parallax';
+import { useParallaxController } from 'react-scroll-parallax';
 
 const Image = () => {
-  const parallaxController = useController();
+  const parallaxController = useParallaxController();
   return <img src="image.jpg" onLoad={() => parallaxController.update()} />;
 };
 ```

documentation/src/css/tailwind-custom-base.css

@@ -313,13 +313,13 @@ legend {
   padding: 0;
 }
 
-ol,
+/* ol,
 ul,
 menu {
   list-style: none;
   margin: 0;
   padding: 0;
-}
+} */
 
 /*
 Prevent resizing textareas horizontally by default.

src/components/ParallaxProvider/index.test.tsx

@@ -6,7 +6,7 @@ import { ParallaxController } from 'parallax-controller';
 
 import { render } from '@testing-library/react';
 import { ParallaxProvider } from '.';
-import { useController } from '../../hooks/useController';
+import { useParallaxController } from '../../hooks/useParallaxController';
 
 describe('A <ParallaxProvider>', () => {
   it('to render children', () => {
@@ -35,7 +35,7 @@ describe('A <ParallaxProvider>', () => {
     let parallaxController;
 
     const ContextChecker = () => {
-      parallaxController = useController();
+      parallaxController = useParallaxController();
       return null;
     };
 

src/hooks/useParallax.ts

@@ -3,10 +3,10 @@ import { useEffect, useRef, useState } from 'react';
 import { useVerifyController } from '../components/Parallax/hooks';
 import { getParallaxProps } from '../helpers/getParallaxProps';
 import { ParallaxProps } from '../types';
-import { useController } from './useController';
+import { useParallaxController } from './useParallaxController';
 
 export function useParallax<T extends HTMLElement>(props: ParallaxProps) {
-  const controller = useController();
+  const controller = useParallaxController();
   const ref = useRef<T>(null);
 
   useVerifyController(controller);