Clear the query upon falsy value (or custom)

[Southclaws]

Hey! Quick question, I'm using query state to drive edit mode for a page, so ?edit=true enables editing controls. What I'd like to do is simply remove this query parameter entirely when it's set to false, in order to ensure the parameter ?edit=false is not left in the URL when users copy-paste the URL.

Is this possible to either treat falsy values as "clear the parameter entirely" or some way I can achieve this behaviour through serialising hooks?

[Southclaws]

setEditing(null) seems like the best way, hopefully this helps someone with the same question!

[franky47]

You can also use the clearOnDefault option. Example for a boolean search param, which will remove the ?edit=false from the URL:

import { useQueryState, parseAsBoolean } from 'nuqs'

export function EditMode() {
  const [edit, setEdit] = useQueryState(
    'edit',
    parseAsBoolean
      .withDefaut(false)
      .withOptions({
        clearOnDefault: true
      })
  )
  return (
    <input
      type="checkbox"
      checked={edit}
      onChange={e => setEdit(e.target.checked)
    />
  )
}

[Southclaws]

Ah, this was closer to what I was thinking of as a config option, thanks!