capiroute

!! ARCHIVED PROJECT! OTHER ROUTERS ARE MUCH BETTER !! TRY:

Installation

npm install capiroute --save

router

Example using React

// index.js
import ReactDOM from 'react-dom';
import React from 'react';

import { router } from 'capiroute';

import App from './src/App';
import { createNewTask, editTask } from './src/task';

const render = () => ReactDOM.render(<App />, document.getElementById('root'));

// Subscribe to do something on every route change: 
router.subscribe(render);

router.subscribe( () => {
    
    // match routes
    if (router.isRoot()) {
        router.goto('/tasks');
    } else if (router.match(/^\/tasks\/new$/)) {
        dispatch(createNewTask());
    } else if (router.match(/^\/tasks\/edit\/([^/]+)$/)){
        dispatch(editTask(router.matchedParams()[1]));
    }

    // manage query strings
    if (!router.hasQuery()) {
        router.setQuery({ type: 'inbox' });
    }
    
});

API

subscribe(function): call function on every route change.

const unsubscribe = router.subscribe( () => console.log('Route changed!') );

goto(string): go to route defined by string argument
```
router.goto('/tasks');
```
back(): go back to previous route
```
router.back();
```

match(regex): check if current route matches regex

// considering route: /tasks
console.log(router.match(/\/tasks/));
// output: true
console.log(router.match(/\/task$/));
// output: false

isRoot(): alias to match(/^$/)

// considering route: /
console.log(router.isRoot());
// output: true
// considering route: /match
console.log(router.isRoot());
// output: false

getMatchedParams(): return the last matched params array

// considering route: /tasks/342
router.match(/\/tasks/(\d+)/);
console.log(router.getMatchedParams());
// output: [ '/tasks/342', 342 ]

getQueryString(): return current route's query string

// considering route /tasks/342?type=completed
console.log(router.getQueryString());
// output: { type: 'completed' }

hasQueryString(): returns if query string exists or not

// considering route /tasks?type=completed
console.log(router.hasQueryString());
// output: true
// considering route /tasks
console.log(router.hasQueryString());
// output: false

setQueryString(newQueryString): set query string

// considering route /tasks
router.setQueryString({ type: 'completed' });
// will go to /tasks?type=completed

dispatch(): force call to subscribed functions
```
router.dispatch();
```

Link

Example

import React from 'react';
import { Link } from 'capiroute';

// Element create a link to /tasks?type=archived and log to console on click
const MyLink = () => (
    <Link to="/tasks" queryTo={{ type: 'archived' }} onClick={{console.log('clicked')}} />
);

export default MyLink;

props

to: define which route to goto

// link to /tasks
<Link to="/tasks" />

queryTo: add queryString to URL

// link to current route appended with ?type=archived
<Link queryTo={{ type: 'archived' }} />

onClick: append click event

// will log to console on click
<Link onClick={{ console.log("clicked") }} />

keepQuery: keep current queryString on route change

// considering current URL /?type=archived
// should link to /tasks?type=archived
<Link to="/tasks" keepQuery />

calimaborges/capiroute