Better-State
Including "No Going Back"
This is a small wrapper that encapsulates
Features
-
View the browser history1 for your app.
-
Prevent the use of the browser's back and forward buttons.
("No Going Back")
-
Get more information in the onpopstate event, such as whether the back button or forward button was pressed...
-
Includes the current window.scroll for convenience (useful when using History.scrollRestoration = 'manual')
Installation
npm install better-state
Setup
import betterState from "better-state";
Known Issues
Preventing the browser back button is a bit of a hack - and definitely not supported by most modern browsers.
Please test thoroughly before using in a production environment.
(Because it's not possible to actually prevent the back button event, better-state forces an immediate history.go(1) )
Usage
To change the current browser URL and add to the browser history:
betterState.pushState(url)
betterState.pushState(url,{--some consumer-data})
To prevent the use of the browser's back and forward buttons:
("No Going Back")
betterState.preventBack = true
betterState.preventForward = true
NB - effects of this settings are stacked and cumulative. ie two calls to betterState.preventBack = true
will require two calls to betterState.preventBack = false
to take affect. Use betterState.resetPreventBack()
and betterState.resetPreventForward()
to negate previous calls.
To get the current known history1:
betterState.history
To subscribe to popstate events (i.e. back and forward button clicks...)
betterState.on("state-change", (e) => { console.log(e); });
returns:
- back: [ true | false ] if the back button was pressed.
- forward: [ true | false ] if the forward button was pressed.
- prevented: [ true | false ] if the pop was prevented.
- forced: [ true | false ] if the pop was forced2
- state: { Object } including:
- url
- scrollX
- scrollY
- data: { Object } any consumer data
To override preventBack
and preventForward
:
betterState.forceForward()
betterState.forceBack()
To replace the current state:
(i.e. to change the current URL without adding to the browser history)
betterState.replaceState(url)
betterState.replaceState(url,{--some consumer-data})
To get the current state:
betterState.state