https://github.com/swan-io/chicane

A simple and safe router for React and TypeScript.
https://github.com/swan-io/chicane

react router typescript

Last synced: 3 months ago
JSON representation

A simple and safe router for React and TypeScript.

• Host: GitHub
• URL: https://github.com/swan-io/chicane
• Owner: swan-io
• License: mit
• Created: 2021-10-23T12:51:04.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-07-22T15:18:32.000Z (4 months ago)
• Last Synced: 2024-07-23T13:03:42.999Z (4 months ago)
• Topics: react, router, typescript
• Language: TypeScript
• Homepage: https://swan-io.github.io/chicane/
• Size: 2.03 MB
• Stars: 383
• Watchers: 6
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-typesafe - swan-io/chicane - A simple and safe router for React and TypeScript. (**1. Libraries** / Web)

README

        


# @swan-io/chicane

[![mit licence](https://img.shields.io/dub/l/vibe-d.svg?style=for-the-badge)](https://github.com/swan-io/chicane/blob/main/LICENSE)

[![npm version](https://img.shields.io/npm/v/@swan-io/chicane?style=for-the-badge)](https://www.npmjs.org/package/@swan-io/chicane)

[![bundlephobia](https://img.shields.io/bundlephobia/minzip/@swan-io/chicane?label=size&style=for-the-badge)](https://bundlephobia.com/result?p=@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

```bash

$ yarn add @swan-io/chicane

# --- or ---

$ npm install --save @swan-io/chicane

```

## Links

- 📘 [**Documentation**](https://swan-io.github.io/chicane)

- 📗 [**Usage with other routers**](./ADOPTION.md)

- ⚖️ [**License**](./LICENSE)

## Quickstart

```tsx

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" }, () => 
Home
)

    .with({ name: "Users" }, () => 
Users
)

    .with({ name: "User" }, ({ params }) => 
User {params.userId}
) // params are strongly typed

    .otherwise(() => 
404
);

};

```


## Run the example app

```bash

$ git clone [email protected]:swan-io/chicane.git

$ cd chicane/example

$ yarn install && yarn dev

# --- or ---

$ npm install && npm run dev

```

## 🙌 Acknowledgements

- [react-router](https://github.com/remix-run/react-router) for the `history` and the `Link` creation code.

- [reach-router](https://github.com/reach/router) for the path ranking algorithm.