TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published


downloads ci rms license

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.


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.


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


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

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


Based on the code in the react-router.

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

Package Sidebar


npm i @spyke/react-hook-router-link

Weekly Downloads






Unpacked Size

15.6 kB

Total Files


Last publish


  • spyke