parseAsBoolean

What it does

Normalizes various URL boolean conventions into strict JavaScript booleans. Treats "true" and "1" as true, and "false" and "0" as false. Unrecognized values fall back gracefully to the parser default.

Best For

• "In Stock Only" e-commerce inventory toggles
• "Include Outdated" documentation switches
• Dense table view vs expanded card view modes
• Feature preview flags in query strings

How to use it properly

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

'use client';
 
import { useQueryState, parseAsBoolean } from 'paramsync';
 
export function InStockToggle() {
  const [inStock, setInStock] = useQueryState(
    'inStock',
    parseAsBoolean.withDefault(false)
  );
 
  return (
    <label className="flex items-center gap-2 cursor-pointer select-none">
      <input
        type="checkbox"
        checked={inStock}
        onChange={(e) => setInStock(e.target.checked)}
        className="rounded border-zinc-700 bg-zinc-900 text-blue-600 focus:ring-0"
      />
      <span className="text-sm text-zinc-300">In Stock Only</span>
    </label>
  );
}

Toggles in their default disabled state do not populate `?inStock=false` into the URL.

Related API References