React State Url Fragment

Sets react state to url fragment

useUrlState

import { useCallback } from "react";
import { useUrlState } from "react-state-url-fragment";

export function usePageState<T>(defaultState?: T) {
  const getEncodedState = useCallback(() => location.hash.substring(1), []);
  const onEncodedState = useCallback((hash) => (location.hash = hash), []);
  const handleDecodeError = defaultState && (() => defaultState);

  return useUrlState<T>({
    getEncodedState,
    handleDecodeError,
    onEncodedState,
  });
}

Example

https://github.com/iamogbz/react-state-url-fragment/blob/93b12c825e0ea4975f6b05544a56b7af5826984e/demo/src/components/hooks/usePageState.ts#L1-L22

Demo

$ cd demo/
$ make start

Starting the development server...

Check it out here