feat: export type NavLinkRenderProps

[zeromask1337]

Documentation tells us we can use callbacks to utilize various NavLink states

import { NavLink } from "react-router-dom";

<NavLink
  to="/messages"
  className={({ isActive, isPending }) =>
    isPending ? "pending" : isActive ? "active" : ""
  }
>
  Messages
</NavLink>;

But then restricts us by not letting use type annotation for it

import { NavLink } from 'react-router-dom';
import { useCallback } from 'react';

export const Header = () => {
  const navLinkClassName = useCallback(
    ({ isActive, isPending }: NavLinkRenderProps) => // this is impossible right now because type is not exported
      isPending ? 'text-gray-500' : isActive ? 'text-orange-800' : '',
    [],
  );
  return (
    <>
      <header className='h-10 w-full bg-amber-100'>
        <nav className='p-2'>
          <ul className='flex items-center gap-5'>
            <li>
              <NavLink to='/home' className={navLinkClassName}>
                Home
              </NavLink>
            </li>
            <li>
              <NavLink to='/search' className={navLinkClassName}>
                Search
              </NavLink>
            </li>
          </ul>
        </nav>
      </header>
    </>
  );
};

You might say that we can just map over array of links, as usual, but that again restricts us from building more complex and type safe logic

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 1d3b97ae1198b8637b57c243669fc3502fc8aed5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
react-router-dom	Patch
react-router	Patch
react-router-dom-v5-compat	Patch
react-router-native	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[remix-cla-bot[bot]]

Hi @zeromask1337,

Welcome, and thank you for contributing to React Router!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at [email protected].

Thanks!

- The Remix team

[remix-cla-bot[bot]]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[brophdawg11]

Thank you for the PR! Would you mind adding a changeset?

[zeromask1337]

@brophdawg11 have I done it right?

[github-actions[bot]]

🤖 Hello there,

We just published version 6.24.1-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions[bot]]

🤖 Hello there,

We just published version 6.24.1 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!