A simple js router designed to solve one problem outside of any other frameworks like React, Angular, or Vue
Switch branches/tags
Nothing to show
Clone or download
Latest commit db6ed4a Dec 3, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src #2 add pathFromRoute to be able to reuse routes Dec 1, 2018
.babelrc add unit tests Nov 14, 2018
.gitignore #2 fix spelling mistake Dec 1, 2018
.travis.yml add travis yml file Dec 3, 2018
README.md add dep david stuff Dec 3, 2018
package-lock.json 1.2.0 Dec 1, 2018
package.json 1.2.0 Dec 1, 2018

README.md

npm (scoped) Travis (.org) David

router

A simple js router designed to solve one problem outside of any other frameworks like React, Angular, or Vue

Installing

npm install --save @kevindurb/router

Usage

import { router } from '@kevindurb/router';

const app = router();

app.add('/people', () => {
  console.log('showing people!');
});

app.add('/people/:id', ({ id }) => {
  console.log('load person with id: ', id);
});

app.exec('/people/256'); // load person with id: 256
app.exec('/people'); // showing people!

onMatch

onMatch and offMatch let you add a listener for ANY route matches. You can also pass strings in instead of callbacks as the second argument to add that get passed into your onMatch callback. This works great with setting the current route in a global store like redux or setState in react.

import { router } from '@kevindurb/router';

const app = router();

app.add('/people', 'PEOPLE');
app.add('/people/:id', 'PERSON');

app.onMatch((key, params) => {
  switch (key) {
    case 'PERSON':
      console.log('person! ', params.id);
      break;
    case 'PEOPLE':
      console.log('people!!');
      break;
  }
});

app.exec('/people/256'); // person! 256
app.exec('/people'); // people!!

pathFromRoute

pathFromRoute will let you dry up your code with reproducable routes

import { router, pathFromRoute } from '@kevindurb/router';

const PERSON_ROUTE = '/people/:id';

const app = router();

app.add(PERSON_ROUTE, (params) => {
  console.log('person! ', params.id)
});

app.exec(pathFromRoute(PERSON_ROUTE, { id: 256 })); // person! 256

Usage with history package

npm install --save history
import createHistory from 'history/createBrowserHistory';
import { router, historyMount } from '@kevindurb/router';

const history = createHistory();
const app = router();

app.add('/people', () => {
  console.log('showing people!');
});

app.add('/people/:id', ({ id }) => {
  console.log('load person with id: ', id);
});

history.listen(historyMount(app));

history.push('/people/65'); // load person with id: 65