isDefaultState function

[kodobrody]

Hey, would you mind adding a function that would check against base params and return boolean depending on whether the current params are equal or not to the base ones? It would be useful especially if dev would like to show clear filters button. I tried getting default values from my options object, but even when I have const paramsOptions = { someKey: parseAsBoolean.withDefault(false)} accesing defaultValue shows boolean type instead of false.

[franky47]

Here's an example:

'use client'

import { type inferParserType, parseAsFloat, type ParserMap, useQueryStates } from 'nuqs'
import { Suspense } from 'react'

export default function Page() {
  return (
    <Suspense>
      <Client />
    </Suspense>
  )
}

const searchParams = {
  lat: parseAsFloat.withDefault(0),
  lng: parseAsFloat.withDefault(0)
}

function isDefaultState<Parsers extends ParserMap>(
  parsers: Parsers,
  values: inferParserType<Parsers>
): boolean {
  for (const [key, parser] of Object.entries(parsers)) {
    if (!parser.eq(values[key], parsers[key].defaultValue)) {
      return false
    }
  }
  return true
}

function Client() {
  const [state, setState] = useQueryStates(searchParams)
  const isDefault = isDefaultState(searchParams, state)
  return (
    <div>
      <p>isDefault: {isDefault.toString()}</p>
      <p>lat: {state.lat}</p>
      <p>lng: {state.lng}</p>
      <button
        onClick={() =>
          setState({
            lat: Math.random() * 180 - 90,
            lng: Math.random() * 360 - 180
          })
        }
      >
        Random coordinates
      </button>
      <button onClick={() => setState(null)}>Reset</button>
    </div>
  )
}

The key is to use the eq function of the parser, in case it's not a primitive value that can be compared with === (eg: parseAsArrayOf).

accesing defaultValue shows boolean type instead of false.

That's expected: parseAsBoolean returns (as the name implies) a boolean, and the default value is typed based on the parser underlying type.

[kodobrody]

Thanks, works as expected! Will you consider merging it as a function or is it redundant/too complex to be merged into package?

[franky47]

I would say it's too simple and kind of specific, sure there's a little bit of type involved, but the runtime code is simple enough that this could be vendored and tweaked into app code.

If there is enough demand (👍 this reply), I might add it to the package.

Here's just the relevant part for copy-pasta:

import type { inferParserType, ParserMap } from 'nuqs' // or 'nuqs/server'

export function isDefaultState<Parsers extends ParserMap>(
  parsers: Parsers,
  values: inferParserType<Parsers>
): boolean {
  for (const [key, parser] of Object.entries(parsers)) {
    if (!parser.eq(values[key], parsers[key].defaultValue)) {
      return false
    }
  }
  return true
}