react-concurrent-router/esm/useSearchParams.js

Performant routing embracing React concurrent UI patterns

import _extends from '@babel/runtime/helpers/esm/extends';
import { useContext, useState, useCallback, useEffect } from 'react';
import { a as paramsStringToObject, s as sortAndStringifyRequestParams } from './utils-OBWL19XQ.js';
import { R as RouterContext } from './RouterContext-Bf2jDrm9.js';
import '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
import 'history';
import './SuspendableResource.js';

const useSearchParams = () => {
  const {
    get,
    history,
    subscribe
  } = useContext(RouterContext);
  const [searchParams, setSearchParams] = useState(paramsStringToObject(get().location.search));
  const handleSetSearchParams = useCallback((newParams, {
    replace = false
  } = {}) => {
    const {
      location
    } = get();
    const currentSearchParams = typeof newParams === 'function' && paramsStringToObject(location.search);
    const newSearchParams = typeof newParams === 'function' ? newParams(currentSearchParams) : newParams;
    history[replace ? 'replace' : 'push']({
      pathname: location.pathname,
      search: sortAndStringifyRequestParams(newSearchParams)
    }, _extends({}, location.state, replace && {
      skipRender: true
    }));
  }, []);
  useEffect(() => {
    const dispose = subscribe(async nextEntry => {
      const newSearchParams = paramsStringToObject(nextEntry.location.search);
      setTimeout(() => setSearchParams(newSearchParams), 1);
    });
    return () => dispose();
  }, []);
  return [searchParams, handleSetSearchParams];
};

export { useSearchParams as default };