tiny-history's Introduction

tiny-history

tiny-history is a simple wrapper around the browser history API. To some extent it mimics the behaviour of history, a module created by the good folks from React Training. Main differences from it are that:

basename is not supported;
blocking transitions is not supported;

Why to use this

tiny-history's main selling point is it's size: ~500B minified and gzipped.

How to install

npm i tiny-history

# or

yarn add tiny-history

Browser builds are also available on unpkg:

<!-- iife -->
<script src=//unpkg.com/tiny-history/dist/tiny-history.js></script>

<!-- esm -->
<script type=module>
  import createHistory from "//unpkg.com/tiny-history/dist/tiny-history.esm.js";
  /* ... */
</script>

Usage

import createHistory from "tiny-history";

const history = createHistory();

function doSomething(location, action) {
  /* do something */
}

// register a listener for route transitions
const unlisten = history.listen(doSomething);

// push a new route
history.push("pushed");

// replace a route
history.replace("replaced");

// transition to the previous route
history.back();

// transition to the next route
history.forward();

// transition to an entry of the history based on the index passed
history.go(-1);

// history.listen returns a callback that detaches the listener passed to it
unlisten();

How to use tiny-history to replace history's `createBrowserHistory`

import createHistory from "tiny-history";

const history = createHistory();

history.goForward = history.forward;

history.goBack = history.back;

export default history;