docs: update controller on route change

Author: jscottsmith

documentation/src/components/parallax-route-update/index.tsx

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useParallaxController } from 'react-scroll-parallax';
+
+function useUpdateControllerOnRouteChange() {
+  const location = useLocation();
+  const parallaxController = useParallaxController();
+
+  useEffect(() => {
+    parallaxController.update();
+  }, [location.pathname]);
+}
+
+export const ParallaxRouteUpdate = () => {
+  useUpdateControllerOnRouteChange();
+  return null;
+};

documentation/src/theme/Root.js

@@ -1,9 +1,15 @@
 import React from 'react';
 import { ParallaxProvider } from 'react-scroll-parallax';
+import { ParallaxRouteUpdate } from '../components/parallax-route-update';
 
 // Default implementation, that you can customize
-function Root({ children }) {
-  return <ParallaxProvider>{children}</ParallaxProvider>;
+function Root(props) {
+  return (
+    <ParallaxProvider>
+      <ParallaxRouteUpdate />
+      {props.children}
+    </ParallaxProvider>
+  );
 }
 
 export default Root;