react hooks

useLocation.js

/**
 * @info React hook that keeps up to date with the current location.
 */

import { useState, useEffect } from 'react'

function getCurrentLocation() {
  return {
    pathname: window.location.pathname,
    search: window.location.search
  }
}

/**
 * @type {Array<() => void>}
 */
const listeners = []

/**
 * Notifies all location listeners. 
 * Can be used if the history state has been manipulated in by another module. 
 * Effectifely, all components using the 'useLocation' hook will update.
 */
export function notify() {
  listeners.forEach(listener => listener())
}

export function useLocation() {
  const [{ pathname, search }, setLocation] = useState(getCurrentLocation())

  useEffect(() => {
    window.addEventListener('popstate', handleChange)
    return () => window.removeEventListener('popstate', handleChange)
  }, [])

  useEffect(() => {
    listeners.push(handleChange)
    return () => listeners.splice(listeners.indexOf(handleChange), 1)
  }, [])

  function handleChange() {
    setLocation(getCurrentLocation())
  }

  /**
   * @param {string} url
   */
  function push(url) {
    window.history.pushState(null, null, url)
    notify()
  }

  /**
   * @param {string} url
   */
  function replace(url) {
    window.history.replaceState(null, null, url)
    notify()
  }

  return {
    push,
    replace,
    pathname,
    search
  }
}