@watch-state/history-api
Browser History API with watch-state.
Install
npmnpm i @watch-state/history-api
yarn
yarn add @watch-state/history-api
Usage
You can change History API byhistoryPush
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 ofhistory.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 ofhistory.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 observablelocation.href
import { Watch } from 'watch-state'
import { locationHref, historyPush } from '@watch-state/history-api'
new Watch(() => {
console.log(locationHref.value)
})
historyPush('/test')
locationURL
Returns observablelocation.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 observablelocation.pathname
import { Watch } from 'watch-state'
import { locationPath, historyPush } from '@watch-state/history-api'
new Watch(() => {
console.log(locationPath.value)
})
historyPush('/test')
locationSearch
Returns observablelocation.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 observablelocation.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 aCache
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 observablehistory.state
import { Watch } from 'watch-state'
import { historyState, historyPush } from '@watch-state/history-api'
new Watch(() => {
console.log(historyState.value)
})
historyPush('/test')