useTypedSearchParams

useTypedSearchParams(options?): [QueryParams, setter]

A typed wrapper around React Router's useSearchParams. Returns the parsed query params object (via extractQueryFromPath) and a setter that updates the query string.

Options

Option	Description
coerceBooleans	Convert "true"/"false" to real booleans
coerceNumbers	Convert numeric strings to numbers

import { useTypedSearchParams } from "react-routes-forge/hooks";

function Filters() {
  const [query, setQuery] = useTypedSearchParams({
    coerceBooleans: true,
    coerceNumbers: true,
  });

  // query.page is a number when the URL is '/search?page=2'
  const nextPage = (query.page ?? 0) + 1;

  return (
    <button onClick={() => setQuery({ ...query, page: nextPage })}>
      Next page
    </button>
  );
}

The setter accepts a navigateOptions second argument ({ replace?, state? }), passed through to React Router's setSearchParams.