Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
@watch-state/history-api
Advanced tools
Readme
Browser History API with watch-state.
npm
npm i @watch-state/history-api
yarn
yarn add @watch-state/history-api
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)
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')
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:
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')
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')
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')
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')
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')
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()
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')
If you find a bug, please file an issue on GitHub
FAQs
Browser History API with watch-state
The npm package @watch-state/history-api receives a total of 3 weekly downloads. As such, @watch-state/history-api popularity was classified as not popular.
We found that @watch-state/history-api demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.