Typescript Alternative

[CodeFromAnywhere]

Great package. I found this after I made my own. Just sharing this alternative. This alternative has typescript support and also supports complex data structures like arrays and nested objects. Relies on nextjs but can easily be replaced. Hope this helps someone!

Usage:

const useCustomUrlStore = makeComplexUrlStore<{a:string,b:{c:number}}>();

And in your component:

const YourComponent = () => {

  const [a,setA,isReady]=useCustomUrlStore("a");

  /// stuff
}

Code

import { useRouter } from "next/router";
import qs, { IParseOptions, IStringifyOptions } from "qs";

type Keys<T> = Extract<keyof T, string>;
type O = { [key:string]: any };

/**
 * Variant to the original use url store that has an easier setup and allows for more complex datastructures
 *
 * Uses https://www.npmjs.com/package/qs
 *
 * NB: the base type needs to be an object!
 */
export const makeComplexUrlStore = <T extends O>(): (<K extends Keys<T>>(
  queryKey: K,
) => [T[K], (newValue: T[K] | undefined) => Promise<boolean>, boolean]) => {
  const hookFactory = <K extends Keys<T>>(
    queryKey: K,
  ): [T[K], (newValue: T[K] | undefined) => Promise<boolean>, boolean] => {
    const router = useRouter();

    const queryString = router.asPath.split("?")[1];

    /**
     * NB: These options have quite some overlap but may not be 100%. Careful
     */
    const qsParseOptions: IParseOptions & IStringifyOptions = {
      allowDots: true,
    };

    const parsedQuery = qs.parse(queryString, qsParseOptions) as T;
    const value = parsedQuery[queryKey];

    const setter = async (newValue: T[K] | undefined) => {
      const newState = { ...parsedQuery, [queryKey]: newValue };
      const newQueryString = qs.stringify(newState, qsParseOptions);

      const pushed = await router.push(
        `${router.pathname}?${newQueryString}`,
        undefined,
        { shallow: true },
      );

      return pushed;
    };

    return [value, setter, router.isReady];
  };

  return hookFactory;
};