Nonchalant Programming Master
    Wondering what’s next for npm?Check out our public roadmap! »

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

    1.0.0-beta.8 • Public • Published

    Woozie🕴

    Latest Super Tiny Super Tiny

    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.

    Install

    npm i woozie

    DownloadsWeekly Downloads

    17

    Version

    1.0.0-beta.8

    License

    MIT

    Unpacked Size

    103 kB

    Total Files

    29

    Last publish

    Collaborators

    • avatar