• Stars
    star
    116
  • Rank 303,894 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🛤 - Small frontend router

nanorouter stability

npm version build status downloads js-standard-style

Smol frontend router

Usage

var nanorouter = require('nanorouter')
var router = nanorouter({ default: '/404' })

router.on('/foo', function (params) {
  console.log('hit /foo')
})
router.on('/foo/:bar', function (params) {
  console.log('hit a route with params', params.bar)
})
router.on('/foo#baz', function (params) {
  console.log('we do hash routes too!')
})
router.on('/foo/*', function (params) {
  console.log('and even wildcards', params.wildcard)
})

router.emit('/foo/hello-planet')

FAQ

How is this different from sheet-router?

sheet-router does slightly more and has a different syntax. This router is lighter, faster and covers less concerns. They're pretty similar under the hood though.

API

router = nanorouter([opts])

Create a new router. opts can be:

  • opts.default: set a default handler in case no route matches. Defaults to /404

router.on(routename, handler(params))

Register a handler on a routename. The handler receives an object with params on each render. A result can be returned the caller function.

result = router.emit(routename)

Call a handler for a routename. If no handler matches, the handler specified in opts.default will be called. If no default handler matches, an error will be thrown. Results returned from the called handler will be returned from this function.

matchedRoute = router.match(route)

Matches a route and returns an object. The returned object contains the properties {cb, params, route}. This method does not invoke the callback of a route. If no route matches, the route specified in opts.default will be returned. If no default route matches, an error will be thrown.

Note that router() does not affect browser history. If you would like to add or modify history entries when you change routes, you should use history.pushState() and history.replaceState() alongside router().

See Also

License

MIT

More Repositories

1

choo

🚂🚋 - sturdy 4kb frontend framework
JavaScript
6,776
star
2

bankai

🚉 - friendly web compiler
JavaScript
1,088
star
3

hyperx

🏷 - tagged template string virtual dom builder
JavaScript
1,010
star
4

nanomorph

🚅 - Hyper fast diffing algorithm for real DOM nodes
JavaScript
726
star
5

nanohtml

🐉 HTML template strings for the Browser with support for Server Side Rendering in Node.
JavaScript
687
star
6

nanographql

Tiny graphQL client library
JavaScript
421
star
7

nanocomponent

🚃 - create performant HTML components
JavaScript
366
star
8

wayfarer

👓 composable trie based router
JavaScript
332
star
9

choo-handbook

🚂✋📖 - Learn the choo framework through a set of exercises
HTML
268
star
10

nanobus

🚎 - Tiny message bus
JavaScript
225
star
11

awesome-choo

🌅 Awesome things related with choo framework
197
star
12

create-choo-app

🚞 - create a fresh choo application
JavaScript
181
star
13

nanostate

🚦- Small Finite State Machines
JavaScript
170
star
14

nanocomponent-adapters

🔌 - Convert a nanocomponent to a component for your favourite API or library (web components, (p)react, angular)
JavaScript
96
star
15

choop

🚂⚛️ - choo architecture for preact
JavaScript
93
star
16

on-idle

😴 - Detect when the browser is idle
JavaScript
82
star
17

nanologger

📜 - Cute browser logs
JavaScript
80
star
18

nanoanimation

👨‍🎨 - Safety wrapper around the Web Animation API
JavaScript
72
star
19

nanoraf

🎞 - Only call RAF when needed
JavaScript
71
star
20

choo-devtools

💼 - Expose a choo instance on the window
JavaScript
53
star
21

nanoquery

📇 - Tiny querystring module
JavaScript
49
star
22

nanotask

Microtask queue scheduler for the browser
JavaScript
47
star
23

choo-log

📃 - Development logger for choo
JavaScript
47
star
24

nanoscheduler

Schedule work to be completed when the user agent is idle.
JavaScript
46
star
25

website

🚇 - Hyper Train Transfer Protocol (HTTP)
JavaScript
46
star
26

nanohref

⛓ - Tiny href click handler library
JavaScript
41
star
27

nanotick

process.nextTick() batching utility
JavaScript
37
star
28

choo-store

Lightweight state structure for choo apps.
JavaScript
37
star
29

nanotiming

⏲ - Small timing library
JavaScript
35
star
30

create-choo-electron

:electron: - Create a fresh Choo Electron application
JavaScript
29
star
31

object-change-callsite

Determine the callsite of an object change using Proxies
JavaScript
27
star
32

choo-reload

⛽️ - Livereloading package for choo
JavaScript
27
star
33

on-performance

Listen for performance timeline events
JavaScript
26
star
34

nanobeacon

Small navigator.sendBeacon wrapper
JavaScript
25
star
35

choo-service-worker

👷 - Service worker loader for choo
JavaScript
24
star
36

choo-scaffold

🏗 - Scaffold out files for a Choo project
JavaScript
24
star
37

choo-notification

Web Notification plugin for Choo
JavaScript
22
star
38

nanobounce

Smol debounce package
JavaScript
19
star
39

choo-choo

🎓 learn choo from the command line!
JavaScript
19
star
40

nanomount

Mount a DOM tree on a target node
JavaScript
19
star
41

choo-redirect

🎬 - Redirect a view to another view
JavaScript
19
star
42

persist-storage

🗄 - Enable persistent storage in the browser
JavaScript
19
star
43

nanohistory

Small browser history library
JavaScript
14
star
44

choo-hooks

🎣 - Hook into Choo's events and timings
JavaScript
12
star
45

nanolocation

📍- Small window.location library
JavaScript
10
star
46

discuss

🎭 – Discuss project organization, initiatives, and anything else!
8
star
47

nanocache

Cache Nanocomponents.
JavaScript
7
star
48

bankai-website

JavaScript
6
star
49

choo-umd

🙈 - umd build for choo framework
HTML
3
star