alnilam
v0.9.2
Published
Stellar, statically typed, declarative routing for react.
Downloads
6
Maintainers
Readme
What / Why is Alnilam?
It's a fork of react-router-dom in TypeScript. You can find the differences to RR 5.0 here.
Motivations:
- No more split between core library and dom. This makes the whole thing a lot easier to understand.
- No more react native support. A necessity of point one, but also motivated by the low download count of RR native.
- Streamlining: Removing MemoryRouter, HashRouter, BrowserRouter. Those just wrapped
<Router>
. - Break things the original can't because it would require major releases:
- Dropping exports
- Upping the minimum react version.
- Changing key behaviors (like
Route
)
- Port the entire thing to typescript.
- Break from some minor decisions made for RR.
Ultimately, it's more about the learning experience. It's my first dabble with a library, typescript and publishing something on NPM. Alnilam also serves as my testbed for contributions back to RR.
Acknowlegdements
Thanks to all original contributors of React-Router.
Getting started:
You can find the documenation here.
npm i alnilam
// Minimal example using the browser history API.
import { Router, Switch, Route } from "alnilam";
import { createBrowserHistory } from "verlauf";
const myHistory = createBrowserHistory(/* consult the history documentation for your options here*/);
function MyRouter() {
return (
/* Setting up the router itself. */
<Router history={myHistory}>
{/* Switch will only render the first matching route: */}
<Switch>
{/* Defining the individual routes: */}
<Route path="/" exact >
<div> Epsilon Orionis </div>
</Route>
<Route path="/alnitak" >
<div> Zeta Orionis </div>
</Route>
<Route path="/mintaka" >
<div> Delta Orionis </div>
</Route>
<Route path="/ran" >
<div> Home of Bill. </div>
</Route>
</Switch>
</Router>
);
}
Here is a a small example app made with Alnilam. It shows:
- Nested routes
- Basic use of
<Match>
,<Route>
,<Link>
, and<Switch>
- Use of parameters in route declarations
TODO for 1.0
- [x] Outline (or implement) API changes and refactorings for future work.
- [x] Document the API differences properly in a separate document.
- [ ] Figure out proper typing for withRouter()
Why is it called "Alnilam"?
Alnilam is a star that was used in celestial navigation. It's one of the stars in Orions belt - which happens to be my favorite constellation - and it's official designation is Epsilon Orionis. I'm also a fan of contrived package names ;-)