tiny-hash-router

Super tiny router library with document.location.hash


Keywords
routing, hash, simple-page, apps, javascript, router, single-page-app
License
ISC
Install
npm install tiny-hash-router@0.1.5

Documentation

HashRouter.js

Super simple URL dispatcher for single page apps.

Why?

I wrote some URL dispatchers for server-side apps in the past. When I started writing single-page apps (with my API-server) I needed a simple way of registering URL routes (to sort-of preserve state in the application after refresh).

All the routes are attached in the hash (document.location.hash).

Installation

npm/webpack

npm install --save tiny-hash-router

Bower

bower install --save HashRouter

How?

var hRouter = new HashRouter.Router;
hRoute.route("foo/bar/:page", function(page) {
  console.error("foo/bar on page", page);
}).name("my_route").setDefault("page", 1);

hRoute.route("list/:table/:page", function(table, page) {
});

hRoute.addFilter('page', function(page) {
    return parseInt(page) >= 1;
});

hRoute.registerListener(); // do the initial route.

console.error(hRoute.url("my_page", 99));

Or you can use it directly with WebPack.

import Router from 'tiny-hash-router'

let hRoute = new Router;
hRoute.route("foo/bar/:page", function(page) {
  console.error("foo/bar on page", page);
}).name("my_route").setDefault("page", 1);

hRoute.route("list/:table/:page", function(table, page) {
});

hRoute.addFilter('page', function(page) {
    return parseInt(page) >= 1;
});

hRoute.registerListener(); // do the initial route.

console.error(hRoute.url("my_page", 99));

The library will listen to any change in the document.location.hash, and any change will trigger the newer action.

Disclaimer

  1. This is a work in progress, and things will be added
  2. Things to add in the near future:
    1. Catch-all routes
    2. Events
      1. Pre-routes
      2. Post-routes
      3. Clean up (after we "leave" a given URL).
    3. Better support for RegExp