swan-io / chicane

A simple and safe router for React and TypeScript.

@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/chicane

Links

• 📘 Documentation
• 📗 Usage with other routers
• ⚖️ License

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 [e-mail]:swan-io/chicane.git
$ cd chicane/example

$ yarn install && yarn dev
# --- or ---
$ npm install && npm run dev

🙌 Acknowledgements

• react-router for the history and the Link creation code.
• reach-router for the path ranking algorithm.