Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

navigo

Package Overview
Dependencies
Maintainers
1
Versions
161
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

navigo

A simple vanilla JavaScript router

  • 8.11.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Navigo

A simple dependency-free minimalistic JavaScript router

npm downloads size

Selling points

  • Dependency free
  • ~10KB minified, ~4KB gzipped
  • Based on History API so it does update the URL of the page
  • Supports hash based routing too
  • Simple mapping of route to a function call
  • Parameterized routes
  • Navigating between routes
  • Hooks (before, after, leave, already)
  • Not-found and default handler
  • Easy integration with HTML links via data-navigo HTML attribute

Installation

Drop the following into your page:

<script src="//unpkg.com/navigo"></script>

or via npm/yarn:

> npm install navigo --save
> yarn add navigo -S

Quick start

const router = new Navigo('/');

The constructor of the library accepts a single argument - the root path of your app. If you host your project at https://site.com/my/awesome/app, your root path is /my/awesome/app. Then you have to define your routes.

router.on('/products/list', function () {
  // do something
});

At the end you have to trigger the resolving logic:

router.resolve();

After that when you need a page change call the navigate method. This one changes the URL and (by default) triggers resolve.

router.navigate('/about');

Add data-navigo attribute to your page links and they'll be transformed into navigate callers.

<a href="/about/contacts" data-navigo>Contacts</a>

Checkout the online playground to see it in action.

Development

> yarn dev

Building

> yarn build

Tests

> yarn test
> yarn test-watch

MISC

Keywords

FAQs

Package last updated on 23 Apr 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc