Key Features

• Routing is handled 100% in the browser - no server configuration required!
• Enables routing within a single page of a multi-page application - perfect for GitHub pages!
• Ships with TypeScript type declarations!
• Easy to use with React!

Installation

npm install sharp-router

Create your router

The following example shows how to create a router for an npm-like package manager website

import createRouter from 'sharp-router';

const router = createRouter({
  '/': 'Build amazing things',
  '/package/<packageName:string>': ({ packageName }) => packageName,
  '/package/<packageName:string>/v/<major:int>/<minor:int>/<patch:int>': ({
    packageName,
  }) => packageName,
});

Navigation

The following examples show different ways to navigate to example.com/#/package/sharp-router/v/4/1/3

// With Sharp Router
router.navigateTo('/package/sharp-router/v/4/1/3');

// With vanilla JavaScript
location.hash = '#/package/sharp-router/v/4/1/3';

<!-- With HTML -->
<a href="#/package/sharp-router/v/4/1/3">sharp-router</a>

Access current route, matched route pattern and extracted parameters

console.log(router.route);        // '/package/sharp-router/v/4/1/3'
console.log(router.matchedRoute); // '/package/<packageName:string>/v/<major:int>/<minor:int>/<patch:int>'
console.log(router.params);       // { packageName: 'sharp-router', major: 4, minor: 1, patch: 3 }

Listen to route changes

const changeListener = ({ route, matchedRoute, params }) => {
  console.log(route);        // '/package/sharp-router/v/4/1/3'
  console.log(matchedRoute); // '/package/<packageName:string>/v/<major:int>/<minor:int>/<patch:int>'
  console.log(params);       // { packageName: 'sharp-router', major: 4, minor: 1, patch: 3 }
};

router.addChangeListener(changeListener);
router.removeChangeListener(changeListener);

Using Sharp Router with React

import React from 'react';
import createRouter, { useRouter } from 'sharp-router';

const router = createRouter({
  '/': 'Build amazing things',
  '/package/<packageName:string>': ({ packageName }) => packageName,
  '/package/<packageName:string>/v/<major:int>/<minor:int>/<patch:int>': ({
    packageName,
  }) => packageName,
});

const ComponentWithRouting = () => {
  const { route, matchedRoute, params } = useRouter(router);
  return (
    <div>
      <div>
        route: <pre>{route}</pre>
      </div>
      <div>
        matchedRoute: <pre>{matchedRoute}</pre>
      </div>
      <div>
        matchedRoute: <pre>{JSON.stringify(params, null, 2)}</pre>
      </div>
    </div>
  );
};

Publishing a new version

Check that linting, formatting, build and tests pass

npm run lint
npm run format
npm run build
npm test

Bump version

npm version [major | minor | patch]

Publish to NPM

npm publish