teardrop v5.0.4
Teardrop
Declarative routing for React.
React Router keeps your UI in sync with the URL. Make the URL your first thought, not an after-thought.
Installation
Using npm:
$ npm install --save teardrop@5.0.0
Then with a module bundler like webpack, use as you would anything else:
// using an ES6 transpiler, like babel
import { BrowserRouter, Match, Link, Miss } from 'teardrop'
// not using an ES6 transpiler
var BrowserRouter = require('teardrop').BrowserRouter
var Match = require('teardrop').Match
var Link = require('teardrop').Link
var Miss = require('teardrop').Miss
You can find the library on window.Teardrop
.
Docs
We're going to try and get the docs sorted out here.
v5 FAQ
Why rename and fork teardrop?
We weren't happy with the direction of teardrop, so we've decided to branch out and provide our own version.
Will you do huge API overhauls?
No, we're not about that. We'll try and ensure everything is backwards compatible for as long as possible.
Why Match, Miss instead of Route?
We like it.
What about route transition hooks?
Transition's can be done within render of a Match.
<Match render={() => {
doStuffHere();
return <ComponentHere />
}}/>
One use case was loading data and waiting to render the next screen until the data landed. With a component, you can save the previous children, render them while loading, and then render your new children when you're done. We'll have an example of this eventually.
I liked seeing all my routes in one place, now what?
Check out the "Route Config" example.
website/examples/RouterConfig.js
Example
Right now, because we're lacking pretty documentation, you'll have to use this example and the modules/tests folder to figure out what's going on. Doccos are in progress. :)
Server Router example
import { ServerRouter, MatchGroup, Match, Miss, Redirect, createServerRenderContext } from 'teardrop';
const location = '/test' // Set this using your server
const routerContext = createServerRenderContext();
render() {
return (
<ServerRouter location={URL from server} context={routerContext}>
{/* This component will return every time the pattern is matched - anywhere in the app */}
<Match
exact={true|false}
pattern="*"
render={({ params, location, pathname, isExact}) => {
// params is an object containing params from your pattern
// location is the current location object
// pathname is the current pathname
// isExact is true when the pattern is an "exact" match (ie. "/" === "/")
// pattern is also returned in case you want it
return <div />
}}
/>
<MatchGroup>
// Put as many matches in here as you want, it'll only match ONE of them
<Match pattern="hi" render={Hi} />
<Match pattern="hello" render={Hello} />
<Match pattern="hey" render={Hey} />
</MatchGroup>
{ /* Simple redirect component */ }
<Match pattern="/old-link" render={() => {
<Redirect to="/new-link" />
}} />
{ /* Nothing matched? We produce a Miss */ }
<Miss render={ErrorPage} />
</ServerRouter>
);
}
Client Router example
import { BrowserRouter, MatchGroup, Match, Miss, Redirect, createServerRenderContext } from 'teardrop';
render() {
return (
<BrowserRouter>
{/* This component will return every time the pattern is matched - anywhere in the app */}
<Match
exact={true|false}
pattern="*"
render={({ params, location, pathname, isExact}) => {
// params is an object containing params from your pattern
// location is the current location object
// pathname is the current pathname
// isExact is true when the pattern is an "exact" match (ie. "/" === "/")
// pattern is also returned in case you want it
return <div />
}}
/>
<MatchGroup>
// Put as many matches in here as you want, it'll only match ONE of them
<Match pattern="hi" render={Hi} />
<Match pattern="hello" render={Hello} />
<Match pattern="hey" render={Hey} />
</MatchGroup>
{ /* Simple redirect component */ }
<Match pattern="/old-link" render={() => {
<Redirect to="/new-link" />
}} />
{ /* Nothing matched? We produce a Miss */ }
<Miss render={ErrorPage} />
</BrowserRouter>
);
}
Changelog
5.0.1
Now sending
router
andlocation
props to the Router's only child.5.0.2
Exporting
MatchGroup
for ease of use.5.0.3
Supporting 'prop-types' from react