https://github.com/tristanmatthias/wc-router

A dynamic router for SPA's using Web Component's custom elements
https://github.com/tristanmatthias/wc-router

custom-elements javascript router spa web-components

Last synced: about 2 months ago
JSON representation

A dynamic router for SPA's using Web Component's custom elements

• Host: GitHub
• URL: https://github.com/tristanmatthias/wc-router
• Owner: tristanMatthias
• Created: 2018-01-01T11:27:06.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-20T00:51:40.000Z (over 6 years ago)
• Last Synced: 2024-11-17T19:43:40.560Z (2 months ago)
• Topics: custom-elements, javascript, router, spa, web-components
• Language: TypeScript
• Size: 200 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ALPHA: WC-ROUTER

Declarative routing for Web Components with Custom Elements.

> This package is still in alpha. It is currently being written to mimic the major functionality of React Router for use in Origami CMS.

Largely inspired by the fantastic [React Router](https://github.com/ReactTraining/react-router).

It uses the NPM [History module](https://www.npmjs.com/package/history) to consume the native History API.

---

## Installation

Using [npm](https://www.npmjs.com/):

```

$ npm install wc-router

```

Then with a module bundler like [webpack](https://webpack.github.io/), use as you would anything else:

```js

// using ES6 modules

import 'wc-router';

```

This will automatically register the custom elements ``, ``, and ``, ready for you to use.

## Usage

In your HTML, add the root element ``, in which all your routes will sit. Your individual routes sit nested inside.

```html

    

        

            Home page

        

        

            Settings page

        

        

            Login page

        

    

    

```

### Linking

Use the `` element to link to another route.

```html

 Open settings 

```

## Issues

If you find a bug, please file an issue on [the issue tracker on GitHub](https://github.com/tristanMatthias/wc-router/issues).

## Credits

Web Components Router is built and maintained by [Tristan Matthias](https://www.github.com/tristanMatthias).