@spyke/react-hook-router-link

An extract from the react-router's Link logic for easier integration with 3rd party UI libraries.

If you're using a UI library and want to render a link, at first you may come up with this:

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

The issue with this approach may be that you will lose support for the icon (Link know nothing about how to render it) and start getting warnings for excess props.

Another approach would be to make a custom component or a HoC, but in both cases you get a more nested React tree and a lot of code.

Hooks solve excess nesting, so there you have a couple of hooks with extracted logic from react-router's Link component to apply to your own components to make them behave the same way.

Prerequisites

This package is compliant with the Raw Module Specification 0.3.0 and provides original stable JavaScript code in the ESM format.

You may need to compile the code and/or load polyfills depending on your environment. Look for exact minimum versions of @babel/preset-env and core-js in the package.json. Most modern apps already have such infrastructure or use similar tools, so it should be a non-issue.

Installation

npm install @spyke/react-hook-router-link
# or
yarn add @spyke/react-hook-router-link

Usage

useLinkState gives you { href, onClick } props for your anchors and links:

import { useLinkState } from "@spyke/react-hook-router-link";

const { href, onClick } = useLinkState("/login");

<a href={href} onClick={onClick}>Login</a>

// or simply

<Anchor label="Login" {...useLinkState("/login")} />

You may utilize useGoBack for getting a handler for going back to the previous route instead of manually calling the history object:

import { useBoBack } from "@spyke/react-hook-router-link";

const handleGoBack = useGoBack();

<Button label="Go Back" onClick={handleGoBack} />

Or if you want just one specific prop there are separate hooks applying the same logic as React Router Link does inside:

import { useGoTo, useHref } from "@spyke/react-hook-router-link";

const settingsHref = useHref("/settings");
const handleGoToSettings = useGoTo("/settings");

<a href="settingsHref" onClick={handleGoToSettings}>
  Open Settings
</a>

All hooks accept a Location object instead of a plain path string.

License

Based on the code in the react-router.

Licensed under the MIT License, see LICENSE for more information.