The history package is a JavaScript library that lets you manage session history anywhere JavaScript runs. It provides a minimal API that lets you manage the history stack, navigate, and persist state between sessions. It is commonly used in conjunction with libraries like React Router but can be used standalone as well.

What are history's main functionalities?

Manage session history

This feature allows you to create a history object and manipulate the browser's session history by pushing new entries onto the history stack.

const { createBrowserHistory } = require('history');
const history = createBrowserHistory();
history.push('/home', { some: 'state' });

Navigate programmatically

This feature enables you to navigate through the history stack programmatically, either going back or forward.

history.go(-1); // Go back one entry in the history stack
history.goForward(); // Go forward one entry in the history stack

Listen for changes to the current location

This feature allows you to listen for changes in the current location, which is useful for reacting to navigation events.

const unlisten = history.listen((location, action) => {
  console.log(action, location.pathname, location.state);
});
// To stop listening
unlisten();

Persist state between sessions

This feature allows you to push state onto the history stack and access it later, which is useful for persisting information across sessions without using local storage or cookies.

history.push('/location', { user: '12345' });
// The state can be accessed later
const location = history.location;
const state = location.state; // { user: '12345' }

Other packages similar to history

Readme

Source

history

history is a JavaScript library that lets you easily manage session history in browsers, testing environments, and (soon, via React Native) native devices. history abstracts away the differences in these different platforms and provides a minimal API that lets you manage the history stack, navigate, confirm navigation, and persist state between sessions. history is library-agnostic and may easily be included in any JavaScript project.

Docs & Help

For questions and support, please visit our channel on Reactiflux or Stack Overflow. The issue tracker is exclusively for bug reports and feature requests.

Installation

Using npm:

$ npm install history

Then with a module bundler like webpack, use as you would anything else:

// using an ES6 transpiler, like babel
import { createHistory } from 'history'

// not using an ES6 transpiler
var createHistory = require('history').createHistory

The UMD build is also available on npmcdn:

<script src="https://npmcdn.com/history/umd/History.min.js"></script>

You can find the library on window.History.

Basic Usage

A "history" encapsulates navigation between different screens in your app, and notifies listeners when the current screen changes.

import { createHistory } from 'history'

let history = createHistory()

// Listen for changes to the current location. The
// listener is called once immediately.
let unlisten = history.listen(location => {
  console.log(location.pathname)
})

history.push({
  pathname: '/the/path',
  search: '?a=query',
  state: { the: 'state' }
})

// When you're finished, stop the listener.
unlisten()

You can find many more examples in the documentation!

Thanks

A big thank-you to Dan Shaw for letting us use the history npm package name! Thanks Dan!

Also, thanks to BrowserStack for providing the infrastructure that allows us to run our build in real browsers.

Keywords

FAQs

What is history?

Is history popular?

Is history well maintained?

Last updated on 19 Dec 2015

Did you know?

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