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)

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);

src/hooks/useController.test.tsx renamed to src/hooks/useParallaxController.test.tsx

@@ -2,15 +2,15 @@ import React, { PropsWithChildren } from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import { ParallaxController } from 'parallax-controller';
 import { MockProvider } from '../testUtils/MockProvider';
-import { useController } from './useController';
+import { useParallaxController } from './useParallaxController';
 
 const controller = ParallaxController.init({ scrollAxis: 'vertical' });
 
 const Wrapper = (props: PropsWithChildren<{}>) => (
   <MockProvider controllerMock={controller}>{props.children}</MockProvider>
 );
 
-describe('given useController hook', () => {
+describe('given useParallaxController hook', () => {
   const { window } = global;
   afterEach(() => {
     global.window = window;
@@ -21,7 +21,7 @@ describe('given useController hook', () => {
         const { result } = renderHook(() => {
           // @ts-expect-error
           delete global.window;
-          return useController();
+          return useParallaxController();
         });
         expect(result.current).toBe(null);
       } catch (e) {}
@@ -30,7 +30,7 @@ describe('given useController hook', () => {
   describe('when not wrapped by the ParallaxProvider', () => {
     test('then it should throw an error', () => {
       try {
-        const { result } = renderHook(() => useController());
+        const { result } = renderHook(() => useParallaxController());
         expect(result.error).toEqual(
           Error(
             'Could not find `react-scroll-parallax` context value. Please ensure the component is wrapped in a <ParallaxProvider>'
@@ -42,7 +42,7 @@ describe('given useController hook', () => {
   describe('when wrapped by the ParallaxProvider', () => {
     test('then it should return the controller from context', () => {
       try {
-        const { result } = renderHook(() => useController(), {
+        const { result } = renderHook(() => useParallaxController(), {
           wrapper: Wrapper,
         });
         expect(result.current).toEqual(controller);

src/hooks/useController.ts renamed to src/hooks/useParallaxController.ts

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 import { ParallaxController } from 'parallax-controller';
 import { ParallaxContext } from '../context/ParallaxContext';
 
-export function useController(): ParallaxController | null {
+export function useParallaxController(): ParallaxController | null {
   const parallaxController = useContext(ParallaxContext);
   const isServer = typeof window === 'undefined';
   if (isServer) {

src/index.ts

@@ -5,11 +5,11 @@ import { ParallaxBanner } from './components/ParallaxBanner';
 import { ParallaxProvider } from './components/ParallaxProvider';
 import { ParallaxContext } from './context/ParallaxContext';
 import { useParallax } from './hooks/useParallax';
-import { useController } from './hooks/useController';
+import { useParallaxController } from './hooks/useParallaxController';
 
 export {
   useParallax,
-  useController,
+  useParallaxController,
   Parallax,
   ParallaxBanner,
   ParallaxProvider,

stories/Image/Image.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { useController } from '../../src';
+import { useParallaxController } from '../../src';
 import styles from './Image.module.scss';
 
 export const Image = (props) => {
-  const parallaxController = useController();
+  const parallaxController = useParallaxController();
   function handleLoad() {
     parallaxController.update();
   }