dunkirk.sh
pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
1import { useCallback, useMemo } from "react";
2import { useLocation, useNavigate } from "react-router-dom";
3
4export function useQueryParams() {
5 const loc = useLocation();
6
7 const queryParams = useMemo(() => {
8 const obj: Record<string, string> = Object.fromEntries(
9 new URLSearchParams(loc.search).entries(),
10 );
11
12 return obj;
13 }, [loc.search]);
14
15 return queryParams;
16}
17
18export function useQueryParam(
19 param: string,
20): [string | null, (a: string | null) => void] {
21 const params = useQueryParams();
22 const location = useLocation();
23 const navigate = useNavigate();
24 const currentValue = params[param] ?? null;
25
26 const set = useCallback(
27 (value: string | null) => {
28 const parsed = new URLSearchParams(location.search);
29 if (value) parsed.set(param, value);
30 else parsed.delete(param);
31 navigate({
32 search: parsed.toString(),
33 });
34 },
35 [param, location.search, navigate],
36 );
37
38 return [currentValue, set];
39}