Woozie🕴

Tiny router with browser-first API for React apps.

🚀 Quick Start

Install

yarn add woozie

Usage

// App.tsx
import * as React from "react";
import { LocationProvider } from "woozie";
import PageRouter from "./PageRouter";

const App: React.FC = () => (
  <LocationProvider>
    <PageRouter />
  </LocationProvider>
);

export default App;

// PageRouter.tsx
import * as React from "react";
import { Router, Redirect, Link, useLocation, HistoryAction } from "woozie";

const ROUTE_MAP = Router.createMap([
  ["/", () => <Link to="/kek">To Kek</Link>],
  ["/kek", () => <div>Kek</div>],
  ["*", () => <Redirect to="/" />],
]);

const PageRouter: React.FC = () => {
  const { trigger, pathname } = useLocation();

  // Scroll to top after new location pushed.
  React.useLayoutEffect(() => {
    if (trigger === HistoryAction.Push) {
      window.scrollTo(0, 0);
    }
  }, [trigger, pathname]);

  return React.useMemo(() => Router.resolve(ROUTE_MAP, pathname, null), [
    pathname,
  ]);
};

export default PageRouter;

Local Development

TSDX scaffolds your new library inside /src, and also sets up a Parcel-based playground for it inside /example.

The recommended workflow is to run TSDX in one terminal:

npm start # or yarn start

This builds to /dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist.

Then run the example inside another:

cd example
npm i # or yarn to install dependencies
npm start # or yarn start

The default example imports and live reloads whatever is in /dist, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. No symlinking required, we use Parcel's aliasing.

To do a one-off build, use npm run build or yarn build.

To run tests, use npm test or yarn test.

License

Licensed under MIT license.

Etymology

From GTA Wiki:

Wu Zi Mu (Chinese: 吴梓穆, Pinyin: wú zì mù, known to his friends as "Woozie") is a character in the Grand Theft Auto series who appears as a main character in Grand Theft Auto: San Andreas.