iamogbz/react-state-url-fragment

🧩 Persists react state as a url fragment to enable navigation between application states

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

• Multiple encoded states concurrenly
• Combine with other state management

Demo

$ cd demo/
$ make start

Starting the development server...

Check it out here