Chicane

A simple and safe router for React and TypeScript.

RoutingReact
swan-io/chicaneswan-io.github.io/chicane/@swan-io/chicane

README

@swan-io/chicane logo

@swan-io/chicane


mit licence
npm version
bundlephobia

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


  1. ```bash
  2. $ yarn add @swan-io/chicane
  3. # --- or ---
  4. $ npm install --save @swan-io/chicane
  5. ```

Links


- 📘 [Documentation](https://swan-io.github.io/chicane)
- 📗 [Usage with other routers](./ADOPTION.md)
- ⚖️ [License](./LICENSE)

Quickstart


  1. ```tsx
  2. import { createRouter } from "@swan-io/chicane";
  3. import { match } from "ts-pattern";

  5. const Router = createRouter({
  6.   Home: "/",
  7.   Users: "/users",
  8.   User: "/users/:userId",
  9. });

  11. const App = () => {
  12.   const route = Router.useRoute(["Home", "Users", "User"]);

  14.   // route object is a discriminated union
  15.   return match(route)
  16.     .with({ name: "Home" }, () => <h1>Home</h1>)
  17.     .with({ name: "Users" }, () => <h1>Users</h1>)
  18.     .with({ name: "User" }, ({ params }) => <h1>User {params.userId}</h1>) // params are strongly typed
  19.     .otherwise(() => <h1>404</h1>);
  20. };
  21. ```

Run the example app


  1. ```bash
  2. $ git clone git@github.com:swan-io/chicane.git
  3. $ cd chicane/example

  5. $ yarn install && yarn dev
  6. # --- or ---
  7. $ npm install && npm run dev
  8. ```

🙌 Acknowledgements


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