# routal

> A simple, light, modern, universal JavaScript router

Latest version **1.0.1** (published 2020-06-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install routal
pnpm add routal
yarn add routal
bun add routal
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-06-28 |
| First published | 2020-06-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Best served with lit-element |
| Maintainers | itsarnavsingh |
| Keywords | A, simple, light, Modern, Router, that, supports, pushState, (update, page, without, reloading), links, stay, SEO, friendly |

## Links

- npm: https://www.npmjs.com/package/routal
- Repository: https://github.com/itsarnavsingh/routal
- Homepage: https://github.com/itsarnavsingh/routal#readme
- Issues: https://github.com/itsarnavsingh/routal/issues
- npm.io page: https://npm.io/package/routal

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2020-06-28
- 1.0.0 — 2020-06-26

## README

<h1>Routal</h1>
 A simple, universal, light, modern Router with animation skills that supports pushState (update pages without reloading) and keep links SEO friendly
 <br> <br>
<img src="https://media3.giphy.com/media/Rf4CG6Bu9p7vPfeXHd/giphy.gif">
  <br>
* Tested well with lit-element (check out the demo code @ index.js & index.html)<br>
* Tested well with vanilla JS<br>


## Usage

Hot to include?
```
import { Routal } from https://unpkg.com/routal@1.0.0/routal.js

OR

npm i routal
```

How to Initialize?
```


    let config = [
      {pattern:'home',transition:'slide',axis:'y',component:(param)=>{return html`<the-home .param=${param}></the-home>`}},
      {pattern:'user/:id',transition:'slide',duration:0.2,component:(param)=>{return html`<the-user .param=${param}></the-user>`} },
      {pattern:'404',transition:'flip',component:(param)=>{return html` Nothing Here to show`} },
      {pattern:'settings/*',transition:'flip',component:()=>{return html`<the-settings></the-settings>`}},
    ]
    

    this.routal = new Routal(config,(routeComponent)=>{
      console.log('callback received')
      this.routeComponent = routeComponent
    },'#container')

     //cotainer could be a query pattern like #id of an element itself like this.querySelector('#id')
     //Routal(config,callback,container) container is optional, It's default value is document.body

```

What to do with links?
```
// for lit-element
<a @click=${this.routal.link} href="/user/punyBot">punyBot </a> 

//for vanilla js
<a onclick='routal.link()' href="/user/punyBot">punyBot</a>
```

---
_Source: https://npm.io/package/routal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._