@spyke/react-hook-router-link

An extract from the react-router link handling logic for easier integration with 3rd party UI libraries.

Installation

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

Usage

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

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

const NavBar = () => {
  return (
    <Header>
      <Anchor label="WebApp" {...useLink("/")} />
      <Nav direction="row">
        <Anchor label="Login" icon={<Login />} {...useLink("/login")} />
        <Anchor label="Signup" icon={<Sign />} {...useLink("/signup")} />
      </Nav>
    </Header>
  );
};

You could apply useGoBack for getting a handler to go back in history:

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:

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

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

<Anchor label="Go back" href="settingsHref" onClick={handleGoToSettings} />

License

Based on the code in the react-router.

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