@bukunmikuti/view-router

A super simple in-page router/navigator

Usage no npm install needed!

<script type="module">
  import bukunmikutiViewRouter from 'https://cdn.skypack.dev/@bukunmikuti/view-router';
</script>

README

View Router

A minimal, super simple in-page router ⚡

npm bundle size (scoped) npm (scoped) GitHub top language

View Router is not in any way related to vue-router the official router of vue.js, neither are they alternatives.

View Router is a simple standalone in-page navigator.

Features 🎉

View Router is a simple library that helps you navigate between different views with style.

  • Super fast and minimal
  • Includes view transitions
  • Easy to set up
  • History API or hash navigation — Optional
  • Small sized (<10kb)

Demo

You might want to see how it works in a test environment before installing:

Check for all demos here

Installation

View Router ships a browser build for <script> tags and an ES Module format. You can also install via npm.

Check all options ➡️

NPM

npm i @bukunmikuti/view-router

Script include

<script src="https://unpkg.com/@bukunmikuti/view-router"></script>

ES Module

import ViewRouter from "https://cdn.skypack.dev/@bukunmikuti/view-router"

Set up 🚀

View router exposes a single object: ViewRouter where you can pass your options.

const viewrouter = new ViewRouter(options)

Instantiate the class by passing an object parameter which must include views: [] and other optional properties.

const viewrouter = new ViewRouter({
   views: [], //required
   navigation: "history"||"hash",
   transition: true||false, 
})

views: []

see details ➡️

Type: Array of objects — required
Description: This property stores each view's property in an object. It can contain several view definitions.

const viewrouter = new ViewRouter({
   views: [
       {
           id: "login", //required
           path: "/login",
           origin: "/login.html",
           mounted() {}, //callback
           render() {} //callback
       },
       
       {/* another view */}
       {/* another view */}
   ]
})

A view definition should include the following properties:

View property Description Default Value
id The 'id' attribute of the template tag — Required undefined
path The URL path that triggers the view when navigated to. undefined
origin If the view is located in another html document, this will contain the relative path to the document. undefined
mounted Views are not part of the DOM by default, they only get mounted when routed to for the first time. Put any logic that depends on accessing elements of the view here. It is called only once callback undefined
render This method is called each time a view is routed to callback undefined

navigation

see details ➡️

Type: String — history or hash (optional)
Description: Use hash navigation or Web history API. If undefined or false then routing is automatically disabled, else views: [{path: ""}] must be specified.

transition

see details ➡️

Type: Boolean — optional
Description: Enable or disable view transitions. Transition type must be specified on the view <template> tag.
All transitions — fadeIn fadeInTop fadeInBottom fadeInLeft fadeInRight

<!--index.html-->
<template id="login" class="v-router fadeInLeft"></template>

<script type="module">
import ViewRouter from "..."

let v = new ViewRouter({
 //...
 transition: true
})
</script>

Methods

see details ➡️
Method Description Return Value
routeTo() Navigate to the specified view. Accepts view id as parameter executes render()

Browser support

View Router currently works on all modern browsers that support async/await, fetch API and other es6 features. We plan on supporting older browsers in future release.

Check all supported browsers here

Contribution

You can contribute by making pull requests to fix issues, dropping a code review/demo example or updating the readme.
Your changes should be clearly stated.
Thank you!

License

This project is available under the ISC Liscense