mcr

micro-client-router

micro client router in es6.

Showing:

Popularity

Downloads/wk

0

GitHub Stars

0

Maintenance

Last Commit

6yrs ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

MicroClientRouter

npm version CircleCI Status
micro client router in es6.

Motivation

I want to make a router without dependencies.

Getting Started

$ npm install micro-clinet-router
import MicroClientRouter from 'micro-client-router';
<script src="micro-client-router.js"></script>

API

It has 5 API only.

Basic API

  • route
  • emit

Support API

  • pushState
  • setLoadHandler
  • setPopStateHandler

initialize

let router = new MicroClientRouter();

if you want to emit when load/popstate events. (use pushState method, you want to emit when pushstate events.)

let router = new MicroClientRouter({ onload: true, onpopstate: true });

route

router.route('/posts', () => {
  // do somethong.
});
router.route('/posts/:id', ({ id }) => {
  // do somethong.
});

emit

router.route('/posts/:id', (id) => {
  console.log(id); // 100
});

route.emit('/posts/100');

pushState

let $link = document.querySelector('a');

$link.addEventListener('click', (event) => {
  let url = event.target.href;
  route.pushState(null, null, url); // change url and run callback seted by route.
});

setLoadHandler

route.setLoadHandler(() => {
  console.log('call this when onload.');
});

setPopStateHandler

route.setLoadHandler(() => {
  console.log('call this when onpopstate.');
});

Examples

import MicroClientRouter from 'micro-client-router';

let router = new MicroClientRouter({ onload: true, onpopstate: true });

router.route('/posts', () => {
  // show posts.
});

router.route('/posts/:id', (id) => {
  // show a post.
});

let $link = document.querySelector('a');

$link.addEventListener('click', (event) => {
  let url = event.target.href;
  route.pushState(null, null, url); // change url and run callback seted by route.
});

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial