Add the isNavLinkActive helper function

[lukejagodzinski]

Hey, currently NavLink supports passing function to the className prop so that we can style link differently depending on isActive/isPending state. The className property is not the only place where it's handy. For example, I want to scroll to the active link after tab refresh. I know there are other ways to do that with refs and some tricks but it would be nice to have the same functionality in the autoFocus property. However, just to not override all the props for the anchor tag, I would just suggest adding a utility function. I can create my own but would be great to have something built in.

One benefit would be for the future to actually not use <NavLink> element at all and just use pure <a>. I've read somewhere that that there was a proposal of attaching single events to all the links on the page and intercepting all the links' clicks.

Basically I would like to do something like:

users.map((user) => {
  const toPathname = `some-pathname`;
  const { isActive, isPending } = getNavLinkState({
    toPathname,
    // This arg is optional.
    end: false,
    // You could also provide current location pathname if it's different from the browser's one.
    locationPathname: undefined
  });

  return (
    <NavLink
      autoFocus={isActive}
      key={user.id}
      // You could use it with any prop you want.
      title={isActive ? `Selected user ${user.name}` : `User ${user.name}`}
      className={twMerge(
        "default-styles",
        isActive ? "active-styles" : undefined,
        isPending ? "pending-styles" : undefined
      )}
      to={toPathname}
    >
      {user.name}
    </NavLink>
  );
});

Wdyt?