Adding "useLink" hooks

[the-spyke]

The Link component has some useful logic inside. I didn't see other ways to reuse it, but to render a <Link />. It isn't very convenient when you use link/anchor components from another libraries which usually implies using as props to replace underlying component. Sometimes it also gives you troubles with filtering additional props and sometimes requires hacks. I think it could be done without additional overhead and those forwardRefs in the Link's code.

I've tried to do a couple of additional hooks, that translate this (with broken icon without additional work):

<Anchor label="MyApp" icon={Icons.Home} as={Link} to="/home" />

Into this (with working everyting):

<Anchor label="MyApp" icon={Icons.Home} {...useLink("/home")} />

The code is quite simple (also allows to get normalized href and onClick handler separately) and uses parts from the packages/react-router-dom/modules/Link.js:

import {
  resolveToLocation,
  normalizeToLocation
} from "./utils/locationUtils.js";

const useHref = to => {
  const history = useHistory();
  const location = useLocation();

  const resolvedLocation = resolveToLocation(to, location);
  const normalizedLocation = normalizeToLocation(resolvedLocation, location);

  return normalizedLocation ? history.createHref(normalizedLocation) : "";
};

const useClick = (to, replace = false) => {
  const history = useHistory();
  const location = useLocation();

  const resolvedLocation = resolveToLocation(to, location);
  const method = replace ? history.replace : history.push;

  return useCallback(event => {
    if (
      !event.defaultPrevented && // onClick prevented default
      event.button === 0 && // ignore everything but left clicks
      !isModifiedEvent(event) // ignore clicks with modifier keys
    ) {
      event.preventDefault();

      method(resolvedLocation);
    }
  }, [resolvedLocation, method]);
};

const useLink = (to, replace = false) => {
  return {
    href: useHref(to),
    onClick: useClick(to, replace),
  };
};

You get the same href with useHref as Link passes down and onClick as combined logic from Link and LinkAnchor respectively with useClick.

Finally, useLink gives you and object to spread into a component whatever you use for displaying an anchor/link.

If this sounds interesting, I can make PR.

[timdorr]

I'll leave this up for others to chime in, but I don't think I really see the point. Both will result in a component being rendered, so this just creates a redundant API for the same task. Just swapping out some props for different props doesn't really seem to have a benefit. If you were to do non-rendering things with these props, you would use the more "effect oriented" hooks like useNavigate and useLocation.

[the-spyke]

@timdorr The Link component has some useful features, so I want to reuse it instead of manually calling history.push and implementing preventDefault with other checks. I also have a component from a UI kit (for this example Grommet) which is called Anchor and know how to render an icon on the left to the text.

So, to have best of the both worlds I need to do complicated things, because using simple <Anchor as={Link} breaks the icon and passes excess props to the Link which then appear on the <a> and give me warnings. Other approaches are to wrap the Link to filter those props, create my own Anchor, etc.

Instead of doing all this I could extract Link's behavior into a hook and use it where I want with any external component I want without consequences or quirks. It's not "swapping" props. If you read carefully, my first original example has some broken behavior that will require more code to fix. And as a bonus you will get less components in the tree.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
You can add the fresh label to prevent me from taking any action.

[andrecasal]

Being able to separate functionality from structure is extremely useful for UI libraries.

I'm in the same spot as @the-spyke. I'm building a UI library based on React Aria and I can't use Remix's Link features because I can't replace it with React Aria's.

It's a shame this issue has been closed.