Skip to content
This repository has been archived by the owner on Mar 10, 2021. It is now read-only.

Commit

Permalink
Fill in the README
Browse files Browse the repository at this point in the history
  • Loading branch information
bkonkle committed Dec 1, 2015
1 parent 69c87d1 commit 441c533
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 5 deletions.
2 changes: 1 addition & 1 deletion LICENSE
@@ -1,6 +1,6 @@
The MIT License (MIT)

Copyright (c) 2015 Brandon Konkle
Copyright (c) 2015 Brainspace Corporation

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
119 changes: 116 additions & 3 deletions README.md
@@ -1,6 +1,119 @@
# unirouter

## To Do
[![Version][version-svg]][package-url]
[![Build Status][travis-svg]][travis-url]
[![License][license-image]][license-url]
[![Downloads][downloads-image]][downloads-url]

* implement prevent-navigation with onbeforeunload
* remember the user's scroll position
A minimal and (soon to be) universal routing engine using [redux][redux],
[uniloc][uniloc], and the HTML5 history api. Inspired by
[@james_k_nelson][james-k-nelson]'s
[Simple Routing with Redux and React][redux-routing] and
[@agamennon][guilherme]'s [redux-tiny-router][redux-tiny-router].

It treats routing as simple state, stored in Redux and made available to
components via Redux's `connect()` wrapper. Manage your components however you
want using the route data generated by [uniloc][uniloc]. Use the included
`<Link/>` component to generate urls from route names and options (often
referred to as "reverse lookup"), and trigger routing events when users click
your links.

## Install

```sh
npm install --save unirouter redux
```

Redux is the only hard peer dependency, but if you want to use the `<Link/>`
component you'll need to install React as well:

```sh
# Optional
npm install --save react
```

## Initialize

Before you can use unirouter, you'll need to include the provided reducer in
your combined redux reducer:

```js
import {combineReducers, createStore} from 'redux'
import myReducer from '../path/to/my/reducer'
import unirouterReducer from 'unirouter/reducer'

const reducer = combineReducers({
router: unirouterReducer,
myStuff: myReducer,
})

let store = createStore(reducer)
```

You'll also need to call the `init()` function to set up your initial routing
information and establish event hooks for the HTML5 history api:

```js
import init from 'unirouter/init'
import getMyStore from '../path/to/my/store'

const store = getMyStore()

const routes = {
listContacts: 'GET /contacts',
postContact: 'POST /contacts',
editContact: 'GET /contacts/:id',
}

const aliases = {
'GET /': 'listContacts',
}

init(store, routes, aliases)
```

This is best done in your init script on the front end, or in your render
middleware on the server.

## Use

If the user were to come in with the url `/contacts/13/edit?details=true`, the
following state would be available using whatever key you passed to the
`combineReducers()` call mentioned above:

```js
{name: 'editContact', options: {id: 13, details: true}}
```

Use this in your top level component to determine which components should be
rendered based on the current route information.

To link directly to a route name, use the included `<Link/>` React component:

```js
export class MyComponent extends Component {
render() {
return (
<div>
<h1>Edit Your Contacts</h1>
<Link href="#edit-contacts" name="editContacts" options={{id: 13, details: true}}/>
</div>
)
}
}
```

[downloads-image]: https://img.shields.io/npm/dm/unirouter.svg?style=flat-square
[downloads-url]: http://npm-stat.com/charts.html?package=unirouter
[guilherme]: https://github.com/Agamennon
[james-k-nelson]: https://twitter.com/james_k_nelson
[license-image]: http://img.shields.io/badge/license-MIT-green.svg?style=flat-square
[license-url]: LICENSE
[package-url]: https://npmjs.org/package/unirouter
[redux-routing]: http://jamesknelson.com/simple-routing-redux-react/
[redux-tiny-router]: https://github.com/Agamennon/redux-tiny-router
[redux]: https://github.com/rackt/redux
[travis-svg]: https://img.shields.io/travis/bkonkle/unirouter/master.svg?style=flat-square
[travis-url]: https://travis-ci.org/bkonkle/unirouter
[uniloc]: http://unicornstandard.com/packages/uniloc.html
[version-svg]: https://img.shields.io/npm/v/unirouter.svg?style=flat-square
1 change: 0 additions & 1 deletion package.json
Expand Up @@ -23,7 +23,6 @@
"isomorphic"
],
"peerDependencies": {
"react": "^0.14.0",
"redux": "^2.0.0 || ^3.0.0"
},
"dependencies": {
Expand Down
Empty file removed src/middleware.js
Empty file.
Empty file removed test/test-middleware.js
Empty file.

0 comments on commit 441c533

Please sign in to comment.