@swan-io/chicane
A simple and safe router for React and TypeScript.
Design principles
- Typed routes: improving the DX, and making sure all your params are here!
- Component-friendly: the router nicely fits in your React app.
- Easy-to-use: naming routes instead of moving around unsafe URLs.
- Performant: avoids any unnecessary render.
Installation
$ yarn add @swan-io/chicane
# --- or ---
$ npm install --save @swan-io/chicaneLinks
Quickstart
import { createRouter } from "@swan-io/chicane";
import { match } from "ts-pattern";
const Router = createRouter({
Home: "/",
Users: "/users",
User: "/users/:userId",
});
const App = () => {
const route = Router.useRoute(["Home", "Users", "User"]);
// route object is a discriminated union
return match(route)
.with({ name: "Home" }, () => <h1>Home</h1>)
.with({ name: "Users" }, () => <h1>Users</h1>)
.with({ name: "User" }, ({ params }) => <h1>User {params.userId}</h1>) // params are strongly typed
.otherwise(() => <h1>404</h1>);
};Run the example app
$ git clone git@github.com:swan-io/chicane.git
$ cd chicane/example
$ yarn install && yarn dev
# --- or ---
$ npm install && npm run dev🙌 Acknowledgements
- react-router for the
historyand theLinkcreation code. - reach-router for the path ranking algorithm.