Ractive Ez Router

Router component for ractive.js

Install

npm i ractive-ez-router

import 'ractive-ez-router';

Usage

<a href="/">Home</a>
<a href="/products">Products</a>
<a href="/invoices/2017">Invoices</a>

<!-- content goes here -->
<EzRouter routes="{{ routes }}"
          notFound="{{ notFound }}" />

Component file

import NotFoundPage from './pages/notfound.js';
import IndexPage    from './pages/index.js';
import ProductsPage from './pages/products.js';
import InvoicesPage from './pages/invoices.js';

new Ractive({
    data() {
        return {
            notFound: NotFoundPage,
            routes: [
                { pattern: "/", component: IndexPage },
                { pattern: "/products", component: ProductsPage },
                { pattern: "/invoices/:year", component: InvoicesPage }
                // InvoicesPage data.route.year will be set to the year that is matched
            ]
        }
    }
});