tanstack-search-state/dist/index.mjs

A utility for managing search params state with TanStack Router in a type-safe way

// src/index.ts
import { useNavigate, useSearch } from "@tanstack/react-router";
function createSearch(initialState) {
  return function useSearchState() {
    const search = useSearch({ strict: false });
    const navigate = useNavigate();
    async function set(update) {
      await navigate({
        to: ".",
        search: (prevRaw) => {
          const prev = { ...initialState, ...prevRaw };
          const next = typeof update === "function" ? update(prev) : update;
          const definedValues = Object.entries(next).reduce(
            (acc, [key, value]) => {
              if (value !== void 0) {
                acc[key] = value;
              }
              return acc;
            },
            {}
          );
          const result = { ...prev };
          Object.keys(next).forEach((key) => {
            if (next[key] === void 0) {
              delete result[key];
            }
          });
          return { ...result, ...definedValues };
        }
      });
    }
    return {
      ...initialState,
      ...search,
      set
    };
  };
}
export {
  createSearch
};