react-use-search-params-state/dist/esm/useSearchParamsState.js

React hook to keep state using URL search params. Based on useSearchParams from react-router@7

import { __assign } from "tslib";
import { useSearchParams } from 'react-router';
var paramToBool = function (paramName, paramDefinition, searchParams) {
    var paramValue = searchParams.get(paramName);
    // The only presence of a boolean param (value === '') is considered true
    if (paramValue === 'true' || paramValue === '1' || paramValue === '')
        return true;
    if (paramValue === 'false' || paramValue === '0')
        return false;
    return paramDefinition.default;
};
var paramToValue = function (paramName, paramDefinition, searchParams) {
    if (paramDefinition.multiple) {
        var paramValue = searchParams.getAll(paramName);
        if (paramValue.length > 0) {
            return paramDefinition.type === 'number' ? paramValue.map(function (value) { return Number(value); }) : paramValue;
        }
    }
    else {
        var paramValue = searchParams.get(paramName);
        if (paramValue) {
            return paramDefinition.type === 'number' ? Number(paramValue) : paramValue;
        }
    }
    return paramDefinition.default;
};
var getValues = function (paramsDefinition, searchParams) {
    var values = {};
    for (var _i = 0, _a = Object.entries(paramsDefinition); _i < _a.length; _i++) {
        var _b = _a[_i], paramName = _b[0], paramDefinition = _b[1];
        if (paramDefinition.type === 'boolean') {
            values[paramName] = paramToBool(paramName, paramDefinition, searchParams);
        }
        else {
            values[paramName] = paramToValue(paramName, paramDefinition, searchParams);
        }
    }
    return values;
};
var getAllCurrentParams = function (searchParams) {
    var allUrlParams = {};
    searchParams.forEach(function (value, key) {
        if (allUrlParams[key]) {
            if (Array.isArray(allUrlParams[key])) {
                allUrlParams[key].push(value);
            }
            else {
                allUrlParams[key] = [allUrlParams[key], value];
            }
        }
        else {
            allUrlParams[key] = value;
        }
    });
    return allUrlParams;
};
export var useSearchParamsState = function (paramsDefinition) {
    var _a = useSearchParams(), searchParams = _a[0], setSearchParams = _a[1];
    var values = getValues(paramsDefinition, searchParams);
    var setValues = function (newValues) {
        var currentParams = getAllCurrentParams(searchParams);
        for (var key in newValues) {
            if (Object.prototype.hasOwnProperty.call(newValues, key)) {
                var value = newValues[key];
                if (value === '' || (Array.isArray(value) && value.length === 0) || paramsDefinition[key].default === value) {
                    delete currentParams[key];
                    delete newValues[key];
                }
            }
        }
        setSearchParams(__assign(__assign({}, currentParams), newValues));
    };
    return [values, setValues];
};
//# sourceMappingURL=useSearchParamsState.js.map