mit licence npm version bundlephobia
A simple and safe router for React and TypeScript.
- 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.
$ yarn add @zoontek/chicane
# --- or ---
$ npm install --save @zoontek/chicane- π Documentation
- βοΈ License
import { createRouter } from "@zoontek/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>); };
$ git clone git@github.com:zoontek/chicane.git $ cd chicane/example $ yarn install && yarn dev # --- or --- $ npm install && npm run dev
- react-router for the
historyand theLinkcreation code. - reach-router for the path ranking algorithm.