Multiple Parameters

Use createSearchParamsStore to manage multiple query parameters as a single reactive object.

import { createQsUtils } from "@vp-tw/nanostores-qs";
import * as presets from "@vp-tw/nanostores-qs/presets";

const qsUtils = createQsUtils();

const filters = qsUtils.createSearchParamsStore({
  search: presets.string(),
  page: presets.integer({ default: 1, min: 0 }),
  limit: presets.integer({ default: 10, min: 1, max: 100 }),
  categories: presets.enum(["electronics", "clothing", "books", "sports"], { array: true }),
});

Reading values

const values = useStore(filters.$values);
// { search: string, page: number, limit: number, categories: Array<...> }

Updating a single field

filters.update("page", 2);
filters.update("limit", 25);

Updating all fields atomically

Use updateAll for correlated parameters — e.g., resetting page when search changes:

filters.updateAll({
  ...filters.$values.get(),
  search: "headphones",
  page: 1, // reset page on new search
});

This produces a single history entry and a consistent UI state, avoiding transient flicker.

Dry-run

const preview = filters.updateAll.dry({
  ...filters.$values.get(),
  page: 1,
});
// "?search=headphones&categories=electronics&categories=clothing&page=1"

Live demo

Multi-Parameter Store with Presets

search — string()

Clear

page — integer({ numInput, default: 1, min: 1 })

Clear

categories — enum(opts, { array: true })

electronicsclothingbookssports

Reset All

$values

{
  search: '',
  page: '',
  categories: []
}

$resolved

{
  search: '',
  page: 1,
  categories: []
}

window.location.search

(empty)

View source on GitHub

Best practice: correlated params

When search changes, reset page to avoid showing page 5 of a new search:

function onSearchChange(term: string) {
  filters.updateAll({ ...filters.$values.get(), search: term, page: 1 });
}