npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mr-router

v2.0.2

Published

A simple and lightweight router for use in the browser. Great with React or other front-end application frameworks.

Downloads

11

Readme

Mr. Router

A simple and lightweight router for use in the browser. Great with React or other front-end application frameworks. Supports callbacks for navigating away from hash changes to prevent change from occurring, and more.

Built using Ben "Cowboy" Allman's super awesome JavaScript Basic Route Matcher.

Example Usage

// Set routes
mr.setRoutes({
    Tasks: 'tasks',
    Task: 'task/:id',
    Search: 'search/:keyword/:sortBy'
});

// Set handlers
mr.setController((route, params) => {
    //do something
});

// Route to specified route, by key (calls the appropriate controller).
mr.go('Task', {id: 123});

// Change hash on page to specified route, but do not actually route (does not call the controller).
mr.go('Task', {id: 123}, true);

// Route by reading from page hash and finding a match in Router.routes.
// If a match is found, returns `true`. Otherwise, it returns `false`.
mr.route();

// Register a callback when hash changes
mr.setOnHashChange(() => confirm('Are you sure you want to leave?'));

// Un-register callback
mr.setOnHashChange(null);

// Get route object from hash, if match is found
mr.getObjFromHash('task/123'); //returns {id: 'Task', params: {id: 123}}

Installation

npm i mr-router

Then import to include in your webpack build:

import mr from 'mr-router'

//do things with mr here
mr.route();

Manual Installation

See the Releases.

<script src="mr-router.production.min.js">
MrRouter.route(); //or whatever's clever

API

route()

Routes based on current hash. Returns true if there was a match, false otherwise. Any callbacks set using setOnHashChange are ignored.

status()

Returns an object which represents the current hash.

go(id {string}, params {object}, doNotRoute {boolean=})

Changes the hash, which then is handled by onHashChange, which calls the controller.

  • doNotRoute is optional. If true, the hash is changed without calling any matching controller, and navigateAwayCallback is ignored.

getObjFromHash(hash {string})

Given the specified hash string, if a match was found in Router.routes, it returns an object, ex: {id: 'blah', params:{}}. Returns false if no match was found.

setRoutes(map {object})

Sets or adds the routes given. Will override if any duplicates are present. It extends the route map with Object.assign().

mr.setRoutes({foo: 'bar'});
mr.setRoutes({boo: 'nar'});
mr.getRoutes(); // {foo: 'bar', boo: 'nar'}

setControllers(map {object})

Sets or adds the controllers given. Will override if any duplicates are present. It extends the route map with Object.assign().

mr.setControllers({foo: [function]});
mr.setControllers({boo: [function]});
mr.getControllers(); // {foo: [function], boo: [function]}

setOnHashChange([function])

Sets a callback to fire on hash changes. If that callback returns false, then the hash change is undone (window.history.go(-1) is called). This is great for preventing loss of unsaved changes in a dialog box, for example.

clearRoutes()

Clears the routes.

clearControllers()

Clears the controllers.

Route matching

For more details on how we match routes to/from hashes, please see the documentation for RouteMatcher.

License

MIT. Free to use in all your things!

Contribution

DO IT! PR's welcome.