Skip to content

useSearchParams

useSearchParams is a hook that returns the current URL’s query parameters as a URLSearchParams object.

tsx
"use client";

import { useSearchParams } from "@react-just/router";

export default function SearchBar() {
  const searchParams = useSearchParams();

  const query = searchParams.get("q");
  const type = searchParams.get("type");

  // URL -> /search?q=duck&type=image
  // query -> "duck"
  // type -> "image"
}

Parameters

tsx
const searchParams = useSearchParams();

useSearchParams takes no parameters.

Returns

useSearchParams returns a Web URLSearchParams object, which provides methods to read values from the URL's query string.

tsx
function useSearchParams(): URLSearchParams;
  • The object is read-only in practice: calling modifying methods (like .set() or .delete()) does not update the URL or trigger a navigation.
  • The hook must be used within a Router component. Otherwise, it throws an error.

Released under the MIT License.