Changing font colour depending on url in Gatsby

Question

I have a simple footer component using tailwindcss

import React from "react"
import { FaMixcloud, FaFacebookSquare, FaTwitter } from "react-icons/fa"

const Footer = () => {
  return (
    <footer className="w-full fixed bottom-0 px-4 sm:px-10 py-6 flex justify-between items-center">
      <div className="text-white text-xs font-mono uppercase">
        &copy; {new Date().getFullYear()} adam lawther
      </div>
      <nav className="flex items-center">
        <FaMixcloud className="h-6 w-6 mr-4 text-white" />
        <FaFacebookSquare className="h-4 w-4 mr-4 text-white" />
        <FaTwitter className="h-4 w-4 text-white" />
      </nav>
    </footer>
  )
}

export default Footer

On the homepage the text is white, which is what I am after...but on other pages, which dont have a full size image. The font is white, how can i change the css class id the url is not / (index.js)

Thanks

Answer 1

I would suggest using @reach/router (is what Gatsby's <Link> component uses and how React builds and keeps the logic between links and pages). Once you've installed and imported the package, you can use a location consumer to get what you need safely inside it, because it will expose a location object with all the information you need. Just like:

return <Location>
  {({ location })=> {
     let textColor=location.pathname === '/' ? 'text-white' : 'text-gray-500'

        <footer className="w-full fixed bottom-0 px-4 sm:px-10 py-6 flex justify-between items-center">
      <div className=`${textColor} text-xs font-mono uppercase`>
        &copy; {new Date().getFullYear()} adam lawther
      </div>
      <nav className="flex items-center">
        <FaMixcloud className=`h-6 w-6 mr-4 ${textColor}` />
        <FaFacebookSquare className=`h-6 w-6 mr-4 ${textColor}` />
        <FaTwitter className=`h-6 w-6 mr-4 ${textColor}` />
      </nav>
    </footer>
  }}
</Location>

You can check for other options in https://css-tricks.com/how-to-the-get-current-page-url-in-gatsby/

Keep in mind that accessing directly to the window object may cause a break of your site since it's not defined at the runtime (check it in a build mode) so, you will need to check first if it's defined to render and execute the rest of your code logic, dirtying the code and making less clear and scalable.