useState like API for manipulating single search param in the URL

[uchihamalolan]

Like:

const [param, setParam] = useSearchParam<type>(searchKey[, defaultSearchValue]) 

• have access to search param's value
• trigger re-render when the value changed by another component (which call this hook for same searchKey)
• should be able cal setParam to update the URL and trigger re-render

[tannerlinsley]

You can build this tiny custom hook yourself with the useSearch and useNavigate hooks. Have you tried that?

[uchihamalolan]

Sure, I'll try that. Do you think it'll be useful addition to the examples in the docs?

[tannerlinsley]

It’s all about how opinionated it is. If it’s very primitive and low level I might consider adding it to the library. If it’s relatively primitive, official docs for sure. We’ll see!

…

On Nov 16, 2021, 6:51 PM -0700, Malolan B ***@***.***>, wrote: Sure, I'll try that. Do you think it'll be useful addition to the examples in the docs? — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[vanHekthor]

For the docs, how about this simple, loosely typed solution:

import { useNavigate, useSearch } from "@tanstack/react-router";

function useSearchParams() {
  const searchParams = useSearch({ strict: false });
  type SearchParams = typeof searchParams;

  const navigate = useNavigate();

  const setSearchParams = (params: Partial<SearchParams>) =>
    navigate({ to: ".", search: (prev) => ({ ...prev, ...params }) });

  return [searchParams, setSearchParams] as const;
}

export default useSearchParams;

Usage example:

function SizeSelect() {
  const [searchParams, setSearchParams] = useSearchParams();

  return (
    <Select
      value={searchParams.size}
      onChange={(value) => {
        setSearchParams({ size: value });
      }}
    >
      <Option value="small" />
      <Option value="medium" />
      <Option value="large" />
    </Select>
  );
}

I think the above version would be sufficient for the docs, but an extended version could also be:

type SetSearch<T> = (
  partial: T | Partial<T> | ((prevSearch: T) => T | Partial<T>),
) => void;

function useSearchParams() {
  const searchParams = useSearch({ strict: false });
  type Search = typeof searchParams;

  const navigate = useNavigate();

  const setSearchParams: SetSearch<Search> = (partial) => {
    void navigate({
      to: ".",
      search: (prev) => {
        const partialSearch =
          typeof partial === "function" ? partial(prev) : partial;
        return { ...prev, ...partialSearch };
      },
    });
  };

  return [searchParams, setSearchParams] as const;
}

which is more like a SetStateAction.

[keeganteetaert]

Not sure if this ever made its way in, but this is what I've been using.

import {
	type AnyRoute,
	type RegisteredRouter,
	type RouteById,
	type RouteIds,
	useNavigate,
	useSearch,
} from "@tanstack/react-router";
import type { UseSearchOptions } from "@tanstack/react-router/dist/esm/useSearch";
import type { Expand } from "@tanstack/react-router/dist/esm/utils";
import { useCallback } from "react";

export function useSearchParam<
	TRouteTree extends AnyRoute = RegisteredRouter["routeTree"],
	TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
	TSearch = Expand<RouteById<TRouteTree, TFrom>["types"]["fullSearchSchema"]>,
	TSelected = TSearch,
	Key extends keyof TSelected = keyof TSelected,
>(props: {
	from: UseSearchOptions<TFrom, true, TSearch, TSelected>["from"];
	searchKey: Key;
	replace?: boolean;
}) {
	const value = useSearch<TRouteTree, TFrom, true, TSearch, TSelected>({
		from: props.from,
	})[props.searchKey];
	const navigate = useNavigate({ from: props.from });

	type Value = typeof value;

	const update = useCallback(
		(nextOrUpdateFromLast: Value | ((last: Value) => Value)) => {
			navigate({
				search: (last) => {
					const next =
						nextOrUpdateFromLast instanceof Function
							? nextOrUpdateFromLast(last[props.searchKey] as any)
							: nextOrUpdateFromLast;

					return { ...last, [props.searchKey]: next };
				},
				replace: props.replace,
			});
		},
		[navigate, props.replace, props.searchKey],
	);

	return [value, update] as const;
}

Looks like so:

const [categoryId, setCategoryId] = useSearchParam({
   from: Route.fullPath, 
   searchKey: "categoryId",
   replace: true,
});

I'd be happy to create a PR if this is something you'd want in the library.

[rostero1]

I was banging my head trying to figure this out. Excited to know it was complicated.

[rostero1]

I was trying:

  type NavigateOptions = Parameters<typeof navigate>[0];
  type SearchUpdateFn = NavigateOptions['search'];

  const updateSearchParams = (searchFn: SearchUpdateFn): void => {
    navigate({
      search: searchFn,
      replace: true,
    });
  };

But kept getting an error that the following is not assignable to type never:

    updateSearchParams((prev) => {
      return { ...prev, ...values };
    });

[vanHekthor]

Check out my response above: #70 (reply in thread)

[rostero1]

Thanks. That seemed to work. I think you'd need to wrap it in a make function and take in a route or lazy route to make it reusable, but I couldn't get passedInRoute.useSearch() to return anything other than any when I also accepted the lazy route.

[rostero1]

Actually, I'm not sure this works right since typeof search is the Output and you want to pass the Input.