How can I derive the active state for links?

[larsvankleef]

I don’t see an option to set an active class on the Link component. What would be the workflow to get this working?

I thought I might use useMatchedRoute but it is not really the same as an active indicator.

In reach-router there is a function getProps you can return props you want to add the props of the rendered link. It gives you two variables isPartiallyCurrent and isCurrent this is really handy if you have in main menu and sub navigation.

[EECOLOR]

Interesting idea. Maybe usePartiallyCurrent or useIsCurrent would be smart additions. I'm not really in favor of a getProps function as it introduces a new kind of complexity. You could easily wrap the Link component in a component of your own to set the class when usePartiallyCurrent or useIsCurrent is set.

At the moment the Link component is not aware of routes if I remember correctly. So I rather not add this complexity to the Link component

I'm not sure if we should add these methods to the library. It seems these hooks can be implemented quite easily (from the top of my head, so might contain errors):

function useIsCurrent(route) {
  const pick = usePick()
  return Boolean(pick(route))
}

function useIsPartiallyCurrent(route) {
  const pick = usePick()
  const routes = asRouteChain(route)
  const pickedRoute = pick(...routes)
  return Boolean(pickedRoute) && pickedRoute !== route 
}