gaurd for missing controller

Author: jscottsmith

src/components/Parallax/hooks.ts

@@ -1,7 +1,7 @@
 import { ParallaxController } from 'parallax-controller';
 import { useEffect } from 'react';
 
-export function useVerifyController(controller: ParallaxController) {
+export function useVerifyController(controller: ParallaxController | unknown) {
   useEffect(() => {
     const isServer = typeof window === 'undefined';
     // Make sure the provided controller is an instance of the Parallax Controller

src/components/Parallax/index.tsx

@@ -14,8 +14,8 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
 
   function _getElementOptions(): CreateElementOptions {
     const useSpeedProp = typeof props.speed !== 'undefined';
-    const isHorizontal = controller.scrollAxis == 'horizontal';
-    const isVertical = controller.scrollAxis == 'vertical';
+    const isHorizontal = controller?.scrollAxis == 'horizontal';
+    const isVertical = controller?.scrollAxis == 'vertical';
 
     let translateX = props.translateX;
     let translateY = props.translateY;
@@ -63,19 +63,23 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
 
   // create element
   useEffect(() => {
-    const newElement = controller.createElement(_getElementOptions());
+    const newElement = controller?.createElement(_getElementOptions());
     setElement(newElement);
 
-    return () => controller.removeElementById(newElement.id);
+    return () => {
+      if (newElement) {
+        controller?.removeElementById(newElement.id);
+      }
+    };
   }, []);
 
   // update element
   useEffect(() => {
     if (element) {
       if (props.disabled) {
-        controller.resetElementStyles(element);
+        controller?.resetElementStyles(element);
       } else {
-        controller.updateElementPropsById(
+        controller?.updateElementPropsById(
           element.id,
           _getElementOptions().props
         );

src/hooks/useController.ts

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