Parserparamsync > parsers

parseAsFloat

Floating-point number parser for decimals, ratings, geographical coordinates, and metrics.

TSTypeScript Signature

IntelliSense

parseAsFloat: Parser<number | null>

What it does

Parses decimal values using strict floating-point validation. Rejects Infinity, -Infinity, and invalid non-numeric strings, guaranteeing clean IEEE-754 numbers in your React components.

Best For

Customer rating filters (?minRating=4.5)
Geographical coordinates (?lat=37.77&lng=-122.41)
Precision price filters and percentage discounts (?discount=15.5)
Dimensions and physical weight metrics

How to use it properly

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

TSExample.tsx

'use client';
 
import { useQueryState, parseAsFloat } from 'paramsync';
 
export function RatingFilter() {
  const [minRating, setMinRating] = useQueryState(
    'minRating',
    parseAsFloat.withDefault(0.0)
  );
 
  return (
    <select
      value={minRating}
      onChange={(e) => setMinRating(parseFloat(e.target.value))}
      className="bg-zinc-900 border border-zinc-800 rounded px-2 py-1 text-sm"
    >
      <option value="0">All Ratings</option>
      <option value="3.5">3.5+ Stars</option>
      <option value="4.0">4.0+ Stars</option>
      <option value="4.5">4.5+ Stars</option>
    </select>
  );
}

main|paramsync

TypeScript JSX|UTF-8|Ln 23, Col 1

Clean URL Behavior

Default ratings (e.g. 0.0) or initial coordinates are omitted to keep URLs concise.

State Condition	Clean URL Action	Resulting URL
rating === 0 (default)	Key removed from URL	https://example.com/items
rating === 4.5	Serialized as decimal	https://example.com/items?minRating=4.5

Related API References

parseAsInteger parseAsNumberRange