79308618

Date: 2024-12-26 03:45:11
Score: 2.5
Natty:
Report link

I ended up doing the following. I created a file called 'clientApplication' with the following code

"use client";
import { useEffect } from "react";
import { usePathname } from 'next/navigation';

import FadeInElements from './scripts/FadeInElements'

export default function ClientApplication({ children }) {
  const pathname = usePathname();

  useEffect(() => {
    FadeInElements(pathname);
  });

  return children;
}

Then in my layout.js I wrapped this around my {children}

export default function RootLayout({ children }) {

  return (
    <html lang="en">
      <body data-theme="light">
        <ClientApplication>
          {children}
        </ClientApplication>
      </body>
      <GoogleAnalytics gaId="G-7GTMYC6GZP" />
      <Analytics />
      <SpeedInsights />
    </html>
  )

This seems to be working okay. Do you see any concerns with it?

Reasons:
  • Long answer (-0.5):
  • Has code block (-0.5):
  • Ends in question mark (2):
  • Self-answer (0.5):
  • Low reputation (1):
Posted by: Shane Harley