@watch-state/history-api

Browser History API with watch-state.

Install

npm

npm i @watch-state/history-api

yarn

yarn add @watch-state/history-api

Usage

You can change History API by historyPush and historyReplace from this library or use some default History API methods: history.back(), history.forward(), history.go(delta)

historyPush

This is an action to add History API step. Use the action instead of history.pushState.

import { historyPush } from '@watch-state/history-api'

historyPush('/new-url')

This action returns a promise because of History API changes non-immediately with historyPush. It first of all scrolls to page up by default.

historyPush('/new-url').then(() => {
  console.log('done')
})

Use scroll-behavior equals smooth to have a smooth scroll effect.

You can scroll to another position by the second argument.

historyPush('/new-url', 100)

You can use a selector to scroll at an element.

historyPush('/new-url', '#header')

historyReplace

This is an action to replace History API step. Use the action instead of history.replaceState.

import { historyReplace } from '@watch-state/history-api'

historyReplace('/new-url')

It works the same as historyPush so it returns a promise and has 2 arguments.

You can react on History API changes by next store elements:

locationHref

Returns observable location.href

import { Watch } from 'watch-state'
import { locationHref, historyPush } from '@watch-state/history-api'

new Watch(() => {
  console.log(locationHref.value)
})

historyPush('/test')

locationURL

Returns observable location.pathname + location.search + location.hash

import { Watch } from 'watch-state'
import { locationURL, historyPush } from '@watch-state/history-api'

new Watch(() => {
  console.log(locationURL.value)
})

historyPush('/test')

locationPath

Returns observable location.pathname

import { Watch } from 'watch-state'
import { locationPath, historyPush } from '@watch-state/history-api'

new Watch(() => {
  console.log(locationPath.value)
})

historyPush('/test')

locationSearch

Returns observable location.search

import { Watch } from 'watch-state'
import { locationSearch, historyPush } from '@watch-state/history-api'

new Watch(() => {
  console.log(locationSearch.value)
})

historyPush('?test=1')

locationHash

Returns observable location.hash

import { Watch } from 'watch-state'
import { locationHash, historyPush } from '@watch-state/history-api'

new Watch(() => {
  console.log(locationHash.value)
})

historyPush('#hash')

historyMovement

This is a Cache returns one of the next string: back | forward | same.

If you go back by browser button or history.back() or history.go(delta) with a negative delta then historyMovement value equals back.

If you go forward by browser button or history.forward() or history.go(delta) with a positive delta or historyPush then historyMovement value equals forward.

If you use historyReplace, historyMovement value equals same

import { Watch } from 'watch-state'
import { historyMovement, historyPush } from '@watch-state/history-api'

new Watch(() => {
  console.log(historyMovement.value)
})

historyPush('/test')
history.back()
history.forward()

historyState

Returns observable history.state

import { Watch } from 'watch-state'
import { historyState, historyPush } from '@watch-state/history-api'

new Watch(() => {
  console.log(historyState.value)
})

historyPush('/test')

Issues

If you find a bug, please file an issue on GitHub