https://github.com/zcallan/use-browser-history

A React hook to handle browser history events
https://github.com/zcallan/use-browser-history

back browser history hooks modal react react-hooks use use-browser-history

Last synced: about 1 month ago
JSON representation

A React hook to handle browser history events

• Host: GitHub
• URL: https://github.com/zcallan/use-browser-history
• Owner: zcallan
• Created: 2019-02-15T13:00:18.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-15T16:10:43.000Z (almost 6 years ago)
• Last Synced: 2024-04-25T19:02:39.935Z (8 months ago)
• Topics: back, browser, history, hooks, modal, react, react-hooks, use, use-browser-history
• Language: JavaScript
• Homepage: https://zcallan.github.io/use-browser-history/
• Size: 3.52 MB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• fucking-awesome-react-hooks - `use-browser-history`
• awesome-react-hooks-cn - `use-browser-history`
• awesome-react-hooks - `use-browser-history`
• awesome-react-hooks - `use-browser-history`

README

        
# use-browser-history

> A React hook to handle browser history events

[![NPM](https://img.shields.io/npm/v/use-browser-history.svg)](https://www.npmjs.com/package/use-browser-history) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

![](example.gif)

https://zcallan.github.io/use-browser-history/

## Install

```bash

npm install --save use-browser-history

```

## Usage

```jsx

import React, { useState } from 'react'

import useBrowserHistory from 'use-browser-history'

function Modal({ isOpen, onClose, onOpen }) {

  const [handleBack] = useBrowserHistory( 'my-modal', isOpen, onClose, onOpen );

  if ( !isOpen )

    return null;

  return (

    


      


      


        
Hello!

        Close modal

      

    

  )

}


function App() {

  const [isOpen, setIsOpen] = useState( false );

  return (

    


       setIsOpen( true )}>Open modal


       setIsOpen( false )}

        onOpen={() => setIsOpen( true )}

      />

    

  );

}

```


## API

```js

const [handleBack, handleForward] = useBrowserHistory( name, isActive, onBack, onForward );

```

|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](https://github.com/zcallan)