xyztlp / use-browser-history

A React hook to handle browser history events

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'

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

  if ( !isOpen )
    return null;

  return (
    <div className="modal">
      <div className="modal-backdrop" onClick={handleBack} />

      <div className="modal-box">
        <p>Hello!</p>
        <button onClick={handleBack}>Close modal</button>
      </div>
    </div>
  )
}

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

  return (
    <div>
      <button onClick={() => setIsOpen( true )}>Open modal</button>

      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen( false )}
        onOpen={() => setIsOpen( true )}
      />
    </div>
  );
}

API

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