useSearchParams

A hook that parses URL search parameters into a typed object. Perfect for handling query parameters, filtering, and URL-based state management.

Parameters

• url?: string - URL to parse (defaults to current location)
• opt?: { unique: boolean } - Options for parameter handling
  • unique: Whether to treat duplicate parameters as unique (defaults to true)

Returns

• T - Object containing parsed search parameters, where T is the expected type

Usage

import { useSearchParams } from '@rhinolabs/react-hooks';

interface SearchParams {
  query: string;
  page: number;
  filters: string[];
}

function SearchResults() {
  const params = useSearchParams<SearchParams>(window.location.href, {
    unique: false,
  });

  if (!params?.filters) return null;

  return (
    <div>
      <h2>Search Results for: {params.query}</h2>
      <p>Page: {params.page}</p>
      <div>
        Active Filters:
        {params.filters.map(filter => (
          <span key={filter} className="filter-tag">
            {filter}
          </span>
        ))}
      </div>
    </div>
  );
}

// URL: /?query=react&page=1&filters=new&filters=popular

Notes

• Automatically parses JSON values
• Handles array parameters
• Type-safe with generics
• Supports custom URLs
• Parses on mount
• Handles duplicate parameters
• URL-safe parsing
• Returns typed object