wouter-search/dist/useSearchParamJson.js

Provide useSearchParams(), useSearchParam() and useSearchParamJson() hooks for wouter

import { useCallback, useMemo, useRef } from 'react';
import { useSearchParam } from './useSearchParam.js';
export function useSearchParamJson(key, searchParams, setSearchParams) {
    const [searchParam, setSearchParam] = useSearchParam(key, searchParams, setSearchParams);
    const searchParamJson = useMemo(() => {
        try {
            return JSON.parse(searchParam);
        }
        catch (e) {
            // invalid json, return null
            return null;
        }
    }, [searchParam]);
    const setSearchParamJsonRef = useRef();
    setSearchParamJsonRef.current = (nextInit, options) => {
        setSearchParam((prev) => {
            if (typeof nextInit === 'function') {
                let prevJson;
                try {
                    prevJson = JSON.parse(prev);
                }
                catch (e) {
                    // invalid json, return null
                    prevJson = null;
                }
                return JSON.stringify(nextInit(prevJson));
            }
            else {
                return JSON.stringify(nextInit);
            }
        }, options);
    };
    const setSearchParamJson = useCallback((...args) => setSearchParamJsonRef.current(...args), []);
    return [searchParamJson, setSearchParamJson];
}