use-browser-history
A React hook to handle browser history events
https://zcallan.github.io/use-browser-history/
Install
npm install --save use-browser-history
Usage
import React useState from 'react' import useBrowserHistory from 'use-browser-history' { const handleBack = ; if !isOpen return null; return <div ="modal"> <div ="modal-backdrop" = /> <div ="modal-box"> <p>Hello!</p> <button =>Close modal</button> </div> </div> } { const isOpen setIsOpen = ; return <div> <button =>Open modal</button> <Modal = = = /> </div> ;}
API
const handleBack handleForward = ;
Key | Type | Description |
---|---|---|
name | string |
(required) The unique name to be used inside the browser history state. |
isActive | bool |
(required) Whether or not the entry should exist in the browser history state. For example, in the case of a modal, this should be set to true when the modal is open / visible, and false when it's closed. |
onBack | func |
A callback that is fired when the back button is pressed, or when the handleBack (first arg returned by useBrowserHistory ) function is called and the browser history state has been cleaned up. |
onForward | func |
Exactly like onBack , but for the forward button. You can use this to re-perform something if the user clicks back then forward (like in the example GIF above), to do something such as re-opening a modal. |
License
MIT © zcallan