useLocation

https://github.com/streamich/react-use/blob/master/docs/useLocation.md

React sensor hook that tracks brower's location.

💡 Implementation

Pretty

Copy

1
// utils
const isClient = typeof window === "object";
const on = (obj, ...args) => obj.addEventListener(...args);
const off = (obj, ...args) => obj.removeEventListener(...args);
const patchHistoryMethod = method => {
  const original = history[method];
  history[method] = function(state) {
    const result = original.apply(this, arguments);
    const event = new Event(method.toLowerCase());
    event.state = state;
    window.dispatchEvent(event);
    return result;
  };
};
if (isClient) {
  patchHistoryMethod("pushState");
  patchHistoryMethod("replaceState");
}
const useLocation = () => {
  const buildState = trigger => {
    const { state, length } = history;
    const {
      hash,
      host,
      hostname,
      href,
      origin,
      pathname,
      port,
      protocol,
      search
    } = location;
    return {
      trigger,
      state,
      length,
      hash,
      host,
      hostname,
      href,
      origin,
      pathname,
      port,
      protocol,
      search
    };
  };
  const [state, setState] = useState(
    isClient
      ? buildState("load")
      : {
          trigger: "load",
          length: 1
        }
  );
  const onChange = trigger => setState(buildState(trigger));
  const onPopstate = () => onChange("popstate");
  const onPushstate = () => onChange("pushstate");
  const onReplacestate = () => onChange("replacestate");
  useEffect(() => {
    on(window, "popstate", onPopstate);
    on(window, "pushstate", onPushstate);
    on(window, "replacestate", onReplacestate);
    return () => {
      off(window, "popstate", onPopstate);
      off(window, "pushstate", onPushstate);
      off(window, "replacestate", onReplacestate);
    };
  }, [0]);
  return state;
};
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

🚀 Usage

Pretty

Copy

1
function Demo() {
  const state = useLocation();
  return <pre>{JSON.stringify(state, null, 2)}</pre>;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

⚡Preview

{
  "trigger": "load",
  "state": null,
  "length": 2,
  "hash": "",
  "host": "hooks-guide.netlify.app",
  "hostname": "hooks-guide.netlify.app",
  "href": "https://hooks-guide.netlify.app/react-use/useLocation",
  "origin": "https://hooks-guide.netlify.app",
  "pathname": "/react-use/useLocation",
  "port": "",
  "protocol": "https:",
  "search": ""
}

🚨 console

💄 Improve this hook

Contributors

Raathigeshan