parseAsString

What it does

Reads and writes query string values without altering character encoding or type casing. When paired with withDefault(""), any empty string input or matches to the default are omitted from the URL automatically according to the Clean URL Policy.

Best For

• Free-text search inputs and live search bars
• Active tab identifiers and category names
• Slug-based selection filters
• External referral or UTM campaign tracking parameters

How to use it properly

Import parseAsString from 'paramsync' and bind it to useQueryState:

'use client';
 
import { useQueryState, parseAsString } from 'paramsync';
 
export function SearchFilter() {
  // 300ms debounce ensures 0ms typing latency with debounced URL sync
  const [search, setSearch] = useQueryState(
    'q',
    parseAsString.withDefault(''),
    { debounceMs: 300 }
  );
 
  return (
    <input
      type="text"
      value={search}
      onChange={(e) => setSearch(e.target.value)}
      placeholder="Search documentation..."
      className="px-3 py-2 border rounded bg-zinc-900 border-zinc-800 text-zinc-100"
    />
  );
}

// Functional state updates and clear button
<button onClick={() => setSearch('')}>Clear</button>
// Functional update:
setSearch((prev) => prev.trim().toLowerCase());

Prevents ugly queries like `?search=` or `?tab=overview` from polluting browser address bars and analytics logs.

Configuration Parameters

Related API References