react-light-router

Sources in src/lib

#### install
npm install --save react-light-router

#### import
``jsx
import { LightLink, LightRouter } from 'react-light-router'
`

LightLink


`jsx

Click me!

`
Turns its child component (or any content between its opening and closing tag) into a clickable hash-based link.

Clicking on a LightLink with a path prop /foo/bar will replace the browser's URL fragment with #/foo/bar.

E.g. example.com will become example.com/#/foo/bar without a page-reload. The LightRouter component will consequently render a React component which matches this hash-based path.

$3

#### path
Type: string

A hash-based path which the component links to.




LightRouter


`jsx

`
Display a route's component if the route's path matches the current URL's fragment (excluding #)

A route's path /foo/bar will match example.com/#/foo/bar

$3

#### routes
Type: array

An array of routes

#### defaultRoute
Type: route

An optional default route to be used, when no route's path matches the current URL

route object

#### simplest example
`jsx
{
path: '/hello',
component: Hello
}
`

#### route with guards, props, propsFromPath, plugs and effects
`jsx
{
path: '/hello/:first/:last',
component: Hello,
guards: [fooGuard, barGuard],
effects: [fooEffect],
props: [{ foo: 'bar' }],
propsFromPath: [{
prop: 'first',
segment: ':first',
plugs: [fooPlug, barPlug],
effects: [barEffect]
}, {
prop: 'last',
segment: ':last',
effects: [bazEffect]
}]
}
`

route object properties

#### path
Type: string

A path, which will be compared to the current URL's fragment

e.g. /foo/:foo_id/bar/:bar_id

The path above will match #/foo/4/bar/2, #/foo/4/bar/2/foobar and #/foo/4/bar/2?foo=bar

#### component
Type: react component

A React component to display, if the path matches

#### guards
Type: array

An array of parameterless functions which have to return true for a match

#### effects
Type: array

An array of parameterless functions which produce side-effects (e.g. dispatch a Redux action)

#### props
Type: array

An array of props

e.g. [{foo: bar}]

#### propsFromPath
Type: Array

An array of propFromPath objects

#### propsFromQuery
Type: Array

An array of propFromQuery objects

propFromPath object properties

#### prop
Type: string

The name of a prop

#### segment
Type: string

A string that equals exactly one segment of the route's path

#### plugs
Type: array

An array of pure functions (one argument, one return value) intended for modifying the prop value

#### effects
Type: array

An array of functions which receive the plug-modified prop as their first argument and produce side-effects (e.g. dispatch a Redux action)

propFromQuery object properties

#### prop
Type: string

The name of a prop

#### query
Type: string

The name of a query

#### convert
Type: boolean

If true, strings will be converted to booleans and numbers if applicable.

#### plugs
Type: array

An array of pure functions (one argument, one return value) intended for modifying the converted prop value

#### effects
Type: array

An array of functions which receive the plug-modified prop as their first argument and produce side-effects (e.g. dispatch a Redux action)

demo


Sources in src/demo

Start with npm start

`jsx
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Hello from './Hello.js';
import NotFound from './NotFound.js';
import { LightRouter, LightLink } from '../lib';

const abbreviate = str => {
return str.charAt(0) + '.';
}

const capitalize = str => {
return str.charAt(0).toUpperCase() + str.slice(1);
}

const limitLength = str => {
return str.slice(0, 20);
}

const userIsLoggedIn = () => true;

const routes = [{
path: '/hello/:first/:last',
component: Hello,
guards: [userIsLoggedIn],
effects: [() => console.log('GET /hello/:first/:last')],
propsFromPath: [{
prop: 'first',
segment: ':first',
plugs: [limitLength, abbreviate, capitalize],
effects: [segment => console.log(:first = ${segment})]
}, {
prop: 'last',
segment: ':last',
plugs: [limitLength, capitalize],
effects: [segment => console.log(:last = ${segment})]
}],
propsFromQueries: [{
prop: 'printTimestamp',
query: 'timestamp',
convert: true
},{
prop: 'message',
query: 'message',
plugs: [capitalize],
effects: [query => console.log(message = ${query})]
}]
}]

const defaultRoute = {
component: NotFound
}


class App extends Component {
render() {
return (


);
}
}

export default App;
`

LightUrl


`jsx
import { LightUrl } from 'react-light-router'
`
Provides access to the hash-based path and query

$3

#### LightUrl.getSegments()
Return Type: array

Returns the hash-based path segments of the browser's current URL

example.com/#/foo/bar

`jsx
['foo', 'bar']
`

#### LightUrl.getQueries()
Return Type: array

Returns the hash-based queries of the browser's current URL

example.com/#/foo/bar?filter=unread&sort=new

`jsx
[['filter', 'unread'], ['sort', 'new']]
``