Tips and tricks

Reusing hooks

If you find yourself reusing the same hooks in multiple components, you can create a custom hook to encapsulate the parser configuration.

Tip

All query states bound to the same key will be synchronized across components.

hooks/useCoordinates.ts

'use client'
 
import { useQueryStates, parseAsFloat } from 'nuqs'
 
export function useCoordinates() {
  return useQueryStates({
    lat: parseAsFloat.withDefault(0),
    lng: parseAsFloat.withDefault(0),
  })
}

components/Map.tsx

'use client'
 
import { useCoordinates } from '../hooks/useCoordinates'
 
function MapView() {
  const [{ lat, lng }] = useCoordinates() // Read-only
  return (
    <div>
      Latitude: {lat}
      Longitude: {lng}
    </div>
  )
}
 
function MapControls() {
  const [{ lat, lng }, setCoordinates] = useCoordinates()
  return (
    <div>
      <input
        type="number"
        value={lat}
        onChange={(e) => setCoordinates({ lat: e.target.valueAsNumber })}
      />
      <input
        type="number"
        value={lng}
        onChange={(e) => setCoordinates({ lng: e.target.valueAsNumber })}
      />
    </div>
  )
}

Tips and tricks

Reusing hooks

On this page