feat(gatsby-link): adds support for partiallyActive=true to Link

[arcanis]

Description

Implements a new option in the <Link/> component: partiallyActive={bool}. If true, the route will activate its activeStyle and activeClassName parameter even if only partially active.

I've put the settings on the component rather than the route, as there might be places where you want this settings to be on and others where you want it to be off. Also it was simpler 🙂

I've also moved @reach/router into the peerDependencies (from the regular dependencies) since it's a stateful package (due to the context ref) and you don't want to run the risk of having version conflicts. It shouldn't be a problem because the gatsby package already provides @reach/router.

Related Issues

Fixes #7208

[DSchau]

This seems reasonable--thanks so much for doing this!

Would you be interested in updating the documentation for this, as well? This seems like a feature people have been wanting for a while--so documenting it would the cherry on top!

[arcanis]

Here's the cherry! I won't have the time to make an egghead video, though 😄

[DSchau]

This is a ton cleaner, and I appreciate the tests and the documentation updates.

We'll have to just table the Egghead videos ;)

Thanks for this! Merging and releasing in a sec.

[DSchau]

Successfully published:
 - [email protected]
 - [email protected]

[dustinhorton]

curious about that gatsby-link version—I'm on latest Gatsby (2.1.35), and partiallyActive is not working, and if I look at my lockfile, I'm only on gatsby-link 2.0.6.

Are we not supposed to import gastby-link via Gatsby anymore?

[lmcjt37]

@dustinhorton try running npm update -S gatsby this updated my Gatsby package and also included the addition of partiallyActive. Fixed my issue where the prop didn't exist.

[dustinhorton]

@lmcjt37 what's the -S flag? not seeing it @ https://docs.npmjs.com/cli/update.html

[lmcjt37]

@dustinhorton sorry my fault, that's second nature to add the --save flag. npm update gatsby should update your package. But if you're on 2.1.35 then you should be able to use the partiallyActive prop now?

[dustinhorton]

Now on 2.2.9, and it has gatsby-link 2.0.16 but partiallyActive still isn't working for me.

Tried with both activeClassName and activeStyle props.

[lmcjt37]

@dustinhorton Do you have an example of how you're using Gatsby-Link? Maybe I can help identify the issue

[dustinhorton]

@lmcjt37 Thanks for the offer—caused me to take another fresh look and I realized the error in my implementation (just some leftover destructuring from when I was handling it myself).

[lmcjt37]

@dustinhorton Awesome! Glad you managed to fix it 👍

[imshuffling]

Thanks for doing this.

As I'm bringing my navigation in dynamically I had to add a conditional to the activeClassName to stop the homepage menu item being rendered as active.

Leaving this here as it might help someone.

<Link partiallyActive={true} activeClassName={slug === '/' ? null : 'active'}>
   {item}
</Link>

[gpspake]

I ran in to a similar issue where the home / link is always active when partiallyActive is set to true but my navigation is kinda fancy so I had a slightly different fix. Mine ended up looking like

<Link
  key={page.name}
  className={navigationStyles.navLink}
  to={page.link}
  partiallyActive={true}
  activeStyle={page.link === '/' && pathname !== '/' ? {} : { background: "#0084B4" }}
  >
  {page.name}
</Link>

It aint pretty but it works...

Here's the navigation component where I used it, for context. I also had to import Location:

import React from 'react'
import { Link, StaticQuery } from "gatsby"
import navigationStyles from "./navigation.module.scss"
import { Location } from '@reach/router';

const Navigation = props => {
  const { menuLinks } = props.siteMetadata
  const { pathname } = props.location

  return (
    <div className={navigationStyles.siteNavigation}>
      <nav >
        {menuLinks.map(page => (
          <Link
            key={page.name}
            className={navigationStyles.navLink}
            to={page.link}
            partiallyActive={true}
            activeStyle={page.link === '/' && pathname !== '/' ? {} : { background: "#0084B4" }}
          >
            {page.name}
          </Link>
        ))}
      </nav>
    </div>
  )
}

export default () => (
  <Location>
    {locationProps => <StaticQuery
      query={graphql`
      query {
        site {
          siteMetadata {
            menuLinks {
              name
              link
            }
          }
        }
      }
    `}
      render={data => <Navigation {...locationProps} siteMetadata={data.site.siteMetadata} />}
    />}
  </Location>
)

Thanks for the tip, @imshuffling