@metapages/hash-query/src/react-hooks/useHashParamInt.ts

Get/set URL parameters (state) in the hash string instead of the query string.

import { useCallback, useEffect, useState } from "react";
import { useHashParam } from "./useHashParam";
import { SetHashParamOpts } from "../core";

/**
 * Hook for getting/setting a hash param int (safely encoded)
 */
export const useHashParamInt = (
  key: string,
  defaultValue?: number
): [number | undefined, (v: number | undefined) => void] => {
  const [hashParamString, setHashParamString] = useHashParam(
    key,
    defaultValue !== undefined && defaultValue !== null
      ? defaultValue.toString()
      : undefined
  );
  const [hashInt, setHashInt] = useState<number | undefined>(() => {
    // Initialize with the current hash param value or default
    const initialValue = hashParamString
      ? parseInt(hashParamString)
      : defaultValue;
    return initialValue;
  });

  // if the hash string value changes
  useEffect(() => {
    const newValue = hashParamString ? parseInt(hashParamString) : defaultValue;
    setHashInt(newValue);
  }, [key, hashParamString, defaultValue]);

  const setInt = useCallback(
    (val: number | undefined, opts?: SetHashParamOpts) => {
      if (val) {
        setHashParamString(val.toString(), opts);
      } else {
        setHashParamString(undefined, opts);
      }
    },
    [setHashParamString]
  );

  return [hashInt, setInt];
};