Render Props for the <Link /> Component

[rabah]

Hi All,

So this feature is something I have wanted for a while in any router I have used, only due to the fact that styling Links based on the active state can be a bit annoying, especially if you want to make more complex links. I mainly use TailwindCSS at work and it's generally easy to style basic properties of a link when active, like text colour, background, border etc. But If I want to go just a little bit further, and style an Icon in a link, or add a shape that would transition in and out when active, then I would have to create my own little route checking logic to determine whether the link should be active or not. Here is an example:

Let's take this markup, and using the current method, make it a different style while active.

<Link className="flex items-center gap-2 text-gray-600">
  <UserGroupIcon className="w-5 h-5" />
  <span>User Management</span>
</Link>

This would be some basic active styling, handled internally by react-location

<Link className="flex items-center gap-2 text-gray-600" getActiveProps={() => ({className: 'text-blue-600'})}>
  <UserGroupIcon className="w-5 h-5" />
  <span>User Management</span>
</Link>

But now, we want to style it a bit differently, and make the active text colour different to the icon colour. From my experience, the best 2 ways I could do it would be:

1.

<Link className="flex items-center gap-2 text-gray-600" getActiveProps={() => ({className: 'active'})}>
  <UserGroupIcon className="w-5 h-5" />
  <span>User Management</span>
</Link>

.active {
  @apply text-black;
}

.active svg {
 @apply text-blue-500;
}

2.

function CustomLink() {
  const matchRoute = useMatchRoute()
  const isActive = matchRoute({to: '/users'})

  return (
    <Link className="flex items-center gap-2">
      <UserGroupIcon className={`w-5 h-5 ${isActive ? 'text-blue-500' : 'text-gray-600'}`} />
      <span className={isActive ? 'text-black' : 'text-gray-600'}>User Management</span>
    </Link>
  )
}

Generally, I prefer using the second method because I won't need to go and create a CSS file to style a link. Doing it the 2nd way isn't actually a problem, to be honest, it's just that, the Link is already doing this behind the scenes to determine if the link is active or not. So I wanted to propose a very simple solution that I personally would love to have in this library.

<Link className="flex items-center gap-2">
  {({isActive}) => (
    <>
      <UserGroupIcon className={`w-5 h-5 ${isActive ? 'text-blue-500' : 'text-gray-600'}`} />
      <span className={isActive ? 'text-black' : 'text-gray-600'}>User Management</span>
    </>
  )}
</Link>

I love the idea of this, and would find it much easier to make more complex links and add in more functionality to make the link more interesting. It seems like it would be quite an easy and quick addition to the library and I would end up removing a reasonable amount of code in a lot of our company apps just because of that feature.

Yes, you could create a component that would do this and then you don't have to rewrite the matchRoute logic which is only 2 lines, but then the complexity of that component will increase a lot when you start dealing with lots of different paths. So exposing the active state seems like a good idea and a small effort for a decent gain.

I'm happy to get any feedback on the idea, or maybe someone else has already solved this issue in a better way with the current api.

I'm happy to create an issue or a pull request for this feature if it is agreed on, I thought it best to run it through here before dropping in a PR. 😁

[tannerlinsley]

Implemented here: 77d2da1

[rabah]

Thankyou for that 😃