Path Vars

Installation and Example

To install for use with react-router-dom, install recommended dependencies:

pnpm add react-router-dom use-hash-history history

Then install this module

pnpm install path-vars

Or, run npm install or yarn add, based on your package manager. To avoid duplicate dependencies, also ensure history matches the version used by react-router-dom.

Use with a version of react-router-dom@^6.1.1 as follows:

import * as React from "react";
import { useVars } from "path-vars";
import { useHashHistory } from "use-hash-history";
import { Routes, Route, Link, useParams } from "react-router-dom";
import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";

const Example = () => {
  const hash = useVars(useParams(), {
    formats: [{
      empty: -1,
      keys: ["n"]
      decode: parseInt,
      encode: x => `${x}`
    }]
  });
  const result = <div>n is {hash.n}</div>;
  return (
    <HistoryRouter history={useHashHistory()}>
      <Link to="/42">Go to #42</Link>
      <Routes>
        <Route path="/:n" element={result} />
        <Route path="/" element={result} />
      </Routes>
    </HistoryRouter>
  );
};

Contributing

The published copy lives at path-vars on GitHub. Make any pull request against the main branch.

Package manager

I build and test with pnpm. I've tried npm, yarn@1, yarn@berry, but The uvu testing library currently recommendeds pnpm.