https://github.com/twuni/router-preact

A tiny router for Preact apps. It connects your app with the address bar. That's it.
https://github.com/twuni/router-preact

preact router

Last synced: about 2 months ago
JSON representation

A tiny router for Preact apps. It connects your app with the address bar. That's it.

• Host: GitHub
• URL: https://github.com/twuni/router-preact
• Owner: twuni
• License: mit
• Created: 2021-12-10T03:30:39.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-01-02T00:09:36.000Z (about 3 years ago)
• Last Synced: 2024-11-14T16:47:09.422Z (2 months ago)
• Topics: preact, router
• Language: JavaScript
• Homepage: https://npmjs.com/package/router-preact
• Size: 155 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# 📡 Router | Preact

![Code Coverage by Test Suite][coverage]

![License][license]

[![Bundle Size][footprint]][bundlephobia]

[![Current Release Version][version]][npm]

![Weekly Downloads][downloads]

[![Sponsors][sponsors]][become-a-sponsor]

[![Known Vulnerabilities][vulnerabilities-badge]][vulnerabilities]

A tiny router for Preact apps. It connects your app with the address bar. That's it.

## Features

 * Tiny footprint (less than 1KB gzipped!)

 * No dependencies (BYO Preact/HTM)

 * Comprehensive test suite (100% code coverage)

 * Suitable for production use

 * MIT license

 * Browser-native ESM friendly (designed specifically to require zero build tools to run)

## Installing

```bash

npm install --save router-preact

```

Yarn users, you know what to do instead.

## Usage

The following examples are written in JSX format, for brevity.

### Example: Basic Usage

```jsx

import { Link, Route } from 'router-preact';

const App = () => <>

  

    Next page

  

  

    First page

  

>;

```

### Example: Parameterized Routes

```jsx

import { Link, Route, pattern } from 'router-preact';

const App = () => <>

  

    Go to page 1

  

   <>

    
Thank you for visiting page {pageNumber}.

    Go to next page

  >}/>

>;

```


### Example: Redirection

```jsx

import { Redirect, Route } from 'router-preact';

const App = () => <>

  

    

  

>;

```

### Advanced Example: Intercepting the Router

If you really want to, you can swap out the router implementation by

using the `Router` *context* provided by this package. For example, if

you want to test a component that involves routing.

```jsx

import { Router } from 'router-preact';

const myRouter = {

  match(path) {

    // If the given path matches the currently active route, then return an object with key-value pairs for each path parameter

    // Otherwise, return `undefined`

  },

  navigate(path) {

    // Transition the currently active route to the given path and notify any callbacks registered via onNavigate() of the new path

  },

  onNavigate: (callback) => () => {

    // Register the callback so that it gets notified when the active route changes

    // Return a function that, when called, will deregister the callback

  },

  path() {

    // Return the path of the currently active route

  },

  query() {

    // Return the query parameters of the currently active route as an object

  }

};

const App = () => 

  ...

>;

```

[coverage]: https://img.shields.io/badge/coverage-100%25-success

[license]: https://img.shields.io/npm/l/router-preact

[footprint]: https://img.shields.io/bundlephobia/minzip/router-preact

[version]: https://img.shields.io/npm/v/router-preact

[downloads]: https://img.shields.io/npm/dw/router-preact

[sponsors]: https://img.shields.io/github/sponsors/canterberry

[become-a-sponsor]: https://github.com/sponsors/canterberry

[npm]: https://npmjs.com/package/router-preact

[bundlephobia]: https://bundlephobia.com/package/router-preact

[vulnerabilities-badge]: https://snyk.io/test/npm/router-preact/badge.svg

[vulnerabilities]: https://snyk.io/test/npm/router-preact