<NavLink /> render prop for isActive, isPending

[rabah]

Hi All,

I was really happy when the isActive prop was released on className and style attributes, but one functionality I would have found useful is to access it inside the component itself:

<NavLink to="path">
  {({isActive}) => (
    <>
      <Icon className={isActive ? 'text-blue-500' : 'text-gray-500'} />
      <span className={isActive ? 'text-blue-900' : 'text-gray-700'}>Link</span>
    </>
  )}
</NavLink>

I know that this issue is easily solvable if you create active classes and target whatever is inside the parent class, but when using tailwind, it's very useful having access inside the component like this. This is not a major hindrance, but I believe you could create much more interesting NavLinks with this. I checked the code for the NavLink and it seems pretty straightforward to add this feature. Im happy to create a pull request for this.

Any feedback will be appreciated 😄.

[AHBruns]

Facing this exact problem atm. Not exactly show stopping, but it seems needlessly annoying since I know the NavLink has the info, it just isn't exposing it in a general way.

[sergiodxa]

I just had the same issue, trying to make the icon and text of a NavLink change color if the link is active but using different colors between them, I ended up making them both the same color but would be great to support this.

[doronhorwitz]

In case somebody else gets here and gets confused like me, this feature was actually introduced in Pull Request #8164, pretty much exactly as @rabah asked for.

[ryanflorence]

Could even have a useIsActiveLink that reads context set from the NavLink.

We tried to get away from render props when hooks came out, but I'm also finding that I want them pretty often so I don't need the indirection of a new component just to use a hook.

I'm on board. 👍

[doronhorwitz]

In my comment above I was saying that the requested feature is already available. I was just trying to point out to others that the requested feature is available. I think this discussion can be closed.