wc-router
v0.2.4
Published
A dynamic router for SPA's using Web Component's custom elements
Downloads
11
Maintainers
tmatthiasReadme
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.
It uses the NPM History module to consume the native History API.
Installation
Using npm:
$ npm install wc-routerThen with a module bundler like webpack, use as you would anything else:
// using ES6 modules
import 'wc-router';This will automatically register the custom elements <wc-router>, <wc-route>, and <wc-link>, ready for you to use.
Usage
In your HTML, add the root element <wc-router>, in which all your routes will sit. Your individual routes sit nested inside.
<!DOCTYPE html>
<html lang="en">
<body>
<wc-router>
<wc-route path="/">
Home page
</wc-route>
<wc-route path="/settings">
Settings page
</wc-route>
<wc-route path="/login">
Login page
</wc-route>
</wc-router>
<script type="text/javascript" src="wc-router.min.js"></script>
</body>
</html>Linking
Use the <wc-link> element to link to another route.
<wc-link to='/settings'> Open settings </wc-link>Issues
If you find a bug, please file an issue on the issue tracker on GitHub.
Credits
Web Components Router is built and maintained by Tristan Matthias.