āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/47ng/nuqs/tips-tricks ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
If you find yourself reusing the same hooks in multiple components, you can create a custom hook to encapsulate the parser configuration.
<Callout title="Tip"> All query states bound to the same key will be synchronized across components. </Callout>'use client'
import { useQueryStates, parseAsFloat } from 'nuqs'
export function useCoordinates() {
return useQueryStates({
lat: parseAsFloat.withDefault(0),
lng: parseAsFloat.withDefault(0),
})
}
'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>
)
}
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā