### Start Svelte development server

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/playground/README.md

Commands to start the development server for a Svelte project after dependencies are installed. Includes an option to automatically open the application in a new browser tab.

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

--------------------------------

### Build Svelte project for production

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/playground/README.md

Command to create a production-ready version of the Svelte application, optimizing it for deployment.

```bash
npm run build
```

--------------------------------

### Install sveltekit-search-params via npm

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Instructions to install the 'sveltekit-search-params' library using npm as a development dependency.

```bash
  npm install sveltekit-search-params@latest -D
```

--------------------------------

### Create a new Svelte project

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/playground/README.md

Commands to initialize a new Svelte project using `npm create svelte@latest`. This allows creating a project in the current directory or a specified new directory.

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

--------------------------------

### SvelteKit queryParam and queryParameters with configuration options

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Provides comprehensive examples of passing configuration objects to both `queryParam` and `queryParameters` functions. It demonstrates setting `debounceHistory` to control the delay before a new history entry is created and `pushHistory` to completely disable new history entries for a specific store.

```svelte
<script lang="ts">
	import { ssp, queryParameters, queryParam } from 'sveltekit-search-params';
	const name = queryParam('name', ssp.string(), {
		debounceHistory: 500, //a new history entry will be created after 500ms of this store not changing
	});
	const count = queryParam('count', ssp.number(), {
		debounceHistory: 1500, //a new history entry will be created after 1500ms of this store not changing
	});
	const store = queryParameters(
		{
			username: true,
			isCool: ssp.boolean(true),
		},
		{
			pushHistory: false, //no new history entries for this store
		},
	);
</script>
```

--------------------------------

### Use Helper for Number Query Parameter with Default Value

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Shows how to use the `ssp.number()` helper while also providing a default value. The default value is passed directly as an argument to the helper function, further simplifying the setup for common numeric query parameters.

```svelte
<script lang="ts">
	import { ssp, queryParam } from 'sveltekit-search-params';

	const count = queryParam('count', ssp.number(10));
</script>

The count is {$count}
<input bind:value={$count} type="number" />
```

--------------------------------

### Retrieve All URL Search Parameters in SvelteKit

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Demonstrates how to use `queryParameters()` from `sveltekit-search-params` to get an object containing all current URL search parameters. By default, all parameters are returned as strings.

```svelte
<script lang="ts">
	import { queryParameters } from 'sveltekit-search-params';

	const store = queryParameters();
</script>

<pre>
    {JSON.stringify($store, null, 2)}
</pre>
```

```json
{
	"framework": "svelte",
	"isCool": "true"
}
```

--------------------------------

### Apply Equality Function with SSP Helpers

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

This TypeScript example illustrates how to provide a custom equality function when using `ssp` helpers like `ssp.number()`. The library uses currying, allowing the equality function to be passed as a second invocation, enabling custom comparison logic for parameters managed by these helpers.

```typescript
ssp.number()((current, next) => {
	// your equality function
});

// with default value
ssp.number(10)((current, next) => {
	// your equality function
});
```

--------------------------------

### queryParameters Function API Reference

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Detailed API documentation for the `queryParameters` function, including its parameters and available configuration options for managing search parameters, reactivity, and browser history in SvelteKit applications.

```APIDOC
queryParameters(paramDefinitions: object, options?: object)
  paramDefinitions: object - An object defining the search parameters.
    Each property in `paramDefinitions` can be:
      - A primitive value (e.g., `true` for boolean, `10` for number).
      - An object with `encode`, `decode`, and `equalityFn` properties.
        encode: (value: any) => string - Function to encode the parameter value to a string for the URL.
        decode: (value: string | null) => any - Function to decode the URL string back to the parameter value.
        equalityFn: (current: any, next: any) => boolean - Optional function to compare current and next values.
          Returns `true` if values are considered equal (no reactivity trigger).
          Note: Not used for primitive values.
  options?: object - An optional configuration object for the `queryParameters` function.
    debounceHistory: number (default: 0) - Milliseconds to delay writing to browser history.
      Useful for inputs to prevent history clutter on every keystroke.
    pushHistory: boolean (default: true) - If `false`, prevents new history entries from being written.
      The URL will still update, but the user cannot navigate back via browser history for these changes.
    sort: boolean (default: true) - If `false`, disables sorting of search parameters in the URL.
      Sorting improves cacheability but can be disabled per-object.
    showDefaults: boolean (default: true) - If `false`, prevents immediate navigation to URLs containing default parameter values.
      The parameter will still hold its default value internally if not present in the URL.
```

--------------------------------

### Simplify Query Parameter Encoding/Decoding with ssp.boolean() Helper

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Illustrates the use of the `ssp.boolean()` helper from `sveltekit-search-params` to streamline the encoding and decoding of boolean query parameters. This improves code readability and reduces the need for custom `encode` and `decode` functions.

```svelte
<script lang="ts">
	import { ssp, queryParameters } from 'sveltekit-search-params';

	const params = queryParameters({
		username: true,
		isCool: ssp.boolean(),
	});
</script>

<pre>
    {JSON.stringify(params, null, 2)}
</pre>
```

--------------------------------

### Use Helper for Number Query Parameter Encoding/Decoding

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Introduces the `ssp.number()` helper from `sveltekit-search-params` to simplify encoding and decoding for number types. This helper provides a more concise and readable way to handle common type transformations compared to writing custom `encode`/`decode` functions.

```svelte
<script lang="ts">
	import { ssp, queryParam } from 'sveltekit-search-params';

	const count = queryParam('count', ssp.number());
</script>

The count is {$count}
<input bind:value={$count} type="number" />
```

--------------------------------

### APIDOC: ssp.string() Helper for Query Parameters

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Documents the `ssp.string()` helper. While all query parameters are inherently strings, this helper is provided primarily for explicit readability in configurations.

```typescript
params.str; // "some string value"
```

--------------------------------

### ssp Helper Functions for SvelteKit Search Parameters

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Documentation for the `ssp` object's helper functions, which provide convenient ways to encode and decode common data types (objects, arrays, numbers, booleans, strings, and lz-string compressed data) when working with URL search parameters. Each helper can accept a default value.

```APIDOC
ssp.object(defaultValue: any):
  Description: Maps a query parameter to a JavaScript object.
  Example URL: /?obj={"isComplex":%20true,%20"nested":%20{"field":%20"value"}}
  Usage:
    $store.obj.isComplex; //true
    $store.obj.nested; // {field: "value"}
    $store.obj.nested.value; // "value"

ssp.array(defaultValue: any):
  Description: Maps a query parameter to a JavaScript array.
  Example URL: /?arr=[1,2,3,4]
  Usage:
    $store.arr[0]; //1
    $store.arr[1]; //2
    $store.arr[2]; //3
    $store.arr[3]; //4

ssp.number(defaultValue: number):
  Description: Maps a query parameter to a number.
  Example URL: /?num=1
  Usage:
    $store.num; //1

ssp.boolean(defaultValue: boolean):
  Description: Maps a query parameter to a boolean.
  Example URL: /?bool=true
  Usage:
    $store.bool; //true
  Example URL: /?bool=false
  Usage:
    $store.bool; //false
  Example URL: /
  Usage:
    $store.bool; //false

ssp.string(defaultValue: string):
  Description: Maps a query parameter to a string. Primarily for readability since all query parameters are already strings.

ssp.lz(defaultValue: any):
  Description: Maps any JSON serializable state to its lz-string representation, useful for storing complex state in query parameters without directly exposing it.
  Example URL: /?state=N4IgbghgNgrgpiAXCAsgTwAQGMD2OoYCO8ATpgA4QkQC2cALnCSAL5A
  Usage:
    $store.state.value; //My cool query parameter
```

--------------------------------

### Configure Vite with sveltekit-search-params plugin

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

This snippet demonstrates how to update your Vite configuration file (`vite.config.ts` or `vite.config.js`) to integrate the `ssp` plugin from `sveltekit-search-params`. This step is crucial for resolving dependency issues, particularly when working with older versions of Vite or SvelteKit, ensuring proper functionality of search parameters.

```javascript
import { sveltekit } from '@sveltejs/kit/vite';
import { ssp } from 'sveltekit-search-params/plugin';

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [ssp(), sveltekit()],
};

export default config;
```

--------------------------------

### SvelteKit Search Params Store Configuration Object (APIDOC)

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Defines the properties available within the configuration object that can be passed as an argument to `queryParam` and `queryParameters` functions in `sveltekit-search-params`. These options control various aspects of store behavior, including history management, URL sorting, and reactivity.

```APIDOC
StoreConfigurationObject:
  debounceHistory: number (default: 0)
    Description: The number of milliseconds to delay writing to the browser history. Useful for input fields to prevent excessive history entries on frequent state changes.
  pushHistory: boolean (default: true)
    Description: Determines if new history entries should be created. If set to false, the URL updates but the user cannot navigate back using the browser's history for changes made by this store.
  sort: boolean (default: true)
    Description: Controls whether search parameters in the URL are sorted alphabetically. Setting to false disables this behavior, which can be useful for specific caching strategies.
  showDefaults: boolean (default: true)
    Description: If true, and a search parameter with a default value is not present in the URL, the page will automatically redirect to include the default. Setting to false prevents this redirection.
  equalityFn: (current: any, next: any) => boolean
    Description: A custom function used to compare the current and next values of a store, particularly for complex objects or arrays. It should return true if the values are considered equal (i.e., no reactivity update needed), and false otherwise. This option is not applicable to primitive values.
```

--------------------------------

### Utilize Built-in Helper Functions for URL Search Parameter Types in SvelteKit

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Demonstrates the use of `ssp` helper functions (like `ssp.boolean`) to simplify type handling and default value assignment for URL search parameters, reducing boilerplate for common types.

```svelte
<script lang="ts">
	import { ssp, queryParameters } from 'sveltekit-search-params';

	const store = queryParameters({
		username: true,
		isCool: ssp.boolean(true),
	});
</script>

<pre>
    {JSON.stringify($store, null, 2)}
</pre>
```

--------------------------------

### Define Expected URL Search Parameters with Defaults in SvelteKit

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Shows how to initialize `queryParameters()` with an object defining expected parameters. These parameters will be merged with actual URL query parameters, providing default `null` values if not present in the URL.

```svelte
<script lang="ts">
	import { queryParameters } from 'sveltekit-search-params';

	const store = queryParameters({
		username: true,
	});
</script>

<pre>
    {JSON.stringify($store, null, 2)}
</pre>
```

```json
{
	"framework": "svelte",
	"isCool": "true",
	"username": null
}
```

```json
{
	"framework": "svelte",
	"isCool": "true",
	"username": "paoloricciuti"
}
```

--------------------------------

### Define expected URL query parameters in SvelteKit

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Shows how to initialize 'queryParameters' with an object defining expected parameters. These parameters will be merged with actual URL query parameters, ensuring their presence in the returned object, with 'null' if not found in the URL.

```svelte
<script lang="ts">
	import { queryParameters } from 'sveltekit-search-params';

	const params = queryParameters({
		username: true,
	});
</script>

<pre>
    {JSON.stringify(params, null, 2)}
</pre>
```

```json
{
	"framework": "svelte",
	"isCool": "true",
	"username": null
}
```

```json
{
	"framework": "svelte",
	"isCool": "true",
	"username": "paoloricciuti"
}
```

--------------------------------

### Read all URL query parameters in SvelteKit

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Demonstrates how to import and use the 'queryParameters' method without arguments to retrieve all current URL search parameters as a plain JavaScript object. By default, all parameters are returned as strings.

```svelte
<script lang="ts">
	import { queryParameters } from 'sveltekit-search-params';

	const params = queryParameters();
</script>

<pre>
    {JSON.stringify(params, null, 2)}
</pre>
```

```json
{
	"framework": "svelte",
	"isCool": "true"
}
```

--------------------------------

### Set Multiple Configuration Options for SvelteKit Search Params

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

This Svelte component illustrates how to pass a configuration object as the second argument to the `queryParameters` function. This allows for setting multiple options simultaneously, such as `debounceHistory` to delay history updates and `pushHistory` to control whether new history entries are created, providing fine-grained control over URL and history management.

```svelte
<script lang="ts">
	import { ssp, queryParameters } from 'sveltekit-search-params';
	const params = queryParameters(
		{
			username: true,
			isCool: ssp.boolean(true),
		},
		{
			debounceHistory: 500, // url will change after 500ms
			pushHistory: false, // no new history entries for this object
		},
	);
</script>
```

--------------------------------

### Use ssp.count() Helper with Default Value for Numeric Query Parameters

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Shows how to use the `ssp.count()` helper (likely a variant of `ssp.number()`) to manage numeric query parameters, providing a default value directly to the helper function. This simplifies configuration for common numeric parameters.

```svelte
<script lang="ts">
	import { ssp, queryParameters } from 'sveltekit-search-params';

	const params = queryParameters({
		username: true,
		isCool: ssp.count(10),
	});
</script>

<pre>
    {JSON.stringify(params, null, 2)}
</pre>
```

--------------------------------

### APIDOC: ssp.lz() Helper for Query Parameters

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Documents the `ssp.lz()` helper, which maps any JSON-serializable state to its lz-string compressed representation for storage in query parameters. This is useful for obscuring or compressing complex state within the URL.

```typescript
params.state.value; //My cool query parameter
```

--------------------------------

### SvelteKit queryParam with default value (showDefaults default behavior)

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Demonstrates the default behavior of `queryParam` when a default value is specified. If the search parameter is not present in the URL, the library will automatically redirect to the URL including the default value, making the default visible in the URL.

```svelte
<script lang="ts">
	import { queryParam, ssp } from 'sveltekit-search-params';

	const pageNum = queryParam('pageNum', ssp.number(0));
</script>
```

--------------------------------

### APIDOC: ssp.boolean() Helper for Query Parameters

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Documents the `ssp.boolean()` helper, used to map a query parameter string to a boolean value. It correctly interprets 'true'/'false' strings and absence of the parameter.

```typescript
params.bool; //true
params.bool; //false
```

--------------------------------

### Write to Single URL Query Parameter Store with on:input

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Shows an alternative method to update a URL query parameter by manually handling the `on:input` event of an input element. The store's value is updated directly from the input's value.

```svelte
<script lang="ts">
	import { queryParam } from 'sveltekit-search-params';

	const username = queryParam('username');
</script>

Your username is {$username}
<input
	value={$username}
	on:input={(e) => {
		$username = e.target.value;
	}}
/>
```

--------------------------------

### APIDOC: ssp.object() Helper for Query Parameters

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Documents the `ssp.object()` helper, which maps a JSON-encoded query parameter string into a JavaScript object. This allows complex data structures to be stored and retrieved from URL query parameters.

```typescript
params.obj.isComplex; //true
params.obj.nested; // {field: "value"}
params.obj.nested.value; // "value"
```

--------------------------------

### APIDOC: ssp.array() Helper for Query Parameters

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Documents the `ssp.array()` helper, which maps a JSON-encoded query parameter string into a JavaScript array. This facilitates storing and retrieving list-like data structures from URL query parameters.

```typescript
params.arr[0]; //1
params.arr[1]; //2
params.arr[2]; //3
params.arr[3]; //4
```

--------------------------------

### Read Single URL Query Parameter in SvelteKit

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Demonstrates how to read a single URL query parameter using `queryParam` from `sveltekit-search-params`. The function returns a Svelte store, which can be accessed with the `$` prefix. If the parameter is not present, the store will be null.

```svelte
<script lang="ts">
	import { queryParam } from 'sveltekit-search-params';

	const username = queryParam('username');
</script>

Your username is {$username}
```

--------------------------------

### APIDOC: ssp.number() Helper for Query Parameters

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Documents the `ssp.number()` helper, used to map a query parameter string to a numeric value. This simplifies parsing numeric data from URL query parameters.

```typescript
params.num; //1
```

--------------------------------

### Configure SvelteKit Search Params to Hide Defaults in URL

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

This Svelte component demonstrates how to use the `showDefaults: false` option within `queryParameters`. When set to `false`, the library will not immediately navigate to a URL containing default search parameter values, providing a cleaner URL while still ensuring the parameter has its default value internally if not present in the URL.

```svelte
<script lang="ts">
	import { queryParameters, ssp } from 'sveltekit-search-params';

	const params = queryParameters(
		{
			pageNum: ssp.number(0),
		},
		{
			showDefaults: false,
		},
	);
</script>
```

--------------------------------

### SvelteKit queryParam disabling showDefaults

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Shows how to prevent automatic redirection to a URL with default search parameters by setting the `showDefaults` option to `false`. The store will still hold the default value internally if the parameter is absent, but the URL will not be modified to display it.

```svelte
<script lang="ts">
	import { queryParam, ssp } from 'sveltekit-search-params';

	const pageNum = queryParam('pageNum', ssp.number(0), {
		showDefaults: false,
	});
</script>
```

--------------------------------

### Update URL Search Parameters Reactively in SvelteKit

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Illustrates how to bind an input field to a search parameter store, allowing reactive updates to both the store and the URL when the input value changes.

```svelte
<script lang="ts">
	import { queryParameters } from 'sveltekit-search-params';

	const store = queryParameters();
</script>

<pre>
    {JSON.stringify($store, null, 2)}
</pre>
<input
	value={$store.username}
	on:input={(e) => {
		$store.username = e.target.value;
	}}
/>
```

--------------------------------

### Set Default Value for URL Query Parameter

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Demonstrates how to provide a `defaultValue` for a query parameter. If the parameter is not present in the URL, the store will initialize with this default value. This change occurs only on the client-side after the initial render.

```svelte
<script lang="ts">
	import { queryParam } from 'sveltekit-search-params';

	const count = queryParam('count', {
		encode: (value: number) => value.toString(),
		decode: (value: string | null) => (value ? parseInt(value) : null),
		defaultValue: 10,
	});
</script>

The count is {$count}
<input bind:value={$count} type="number" />
```

--------------------------------

### Custom Encoding and Decoding for URL Search Parameters in SvelteKit

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Explains how to provide custom `encode` and `decode` functions within the `queryParameters` configuration for specific parameters, allowing type transformations (e.g., string to boolean) and default values.

```svelte
<script lang="ts">
	import { queryParameters } from 'sveltekit-search-params';

	const store = queryParameters({
		username: true,
		isCool: {
			encode: (booleanValue) => booleanValue.toString(),
			decode: (stringValue) =>
				stringValue !== null && stringValue !== 'false',
			defaultValue: true,
		},
	});
</script>

<pre>
    {JSON.stringify($store, null, 2)}
</pre>
```

```json
{
	"framework": "svelte",
	"isCool": true,
	"username": null
}
```

```json
{
	"framework": "svelte",
	"isCool": false,
	"username": null
}
```

--------------------------------

### Custom Encoding and Decoding for URL Query Parameters

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Explains how to handle non-string query parameters (like numbers, booleans, or objects) by providing custom `encode` and `decode` functions to `queryParam`. The `decode` function transforms the URL string into the desired type, and `encode` transforms the value back to a string for the URL.

```svelte
<script lang="ts">
	import { queryParam } from 'sveltekit-search-params';

	const count = queryParam('count', {
		encode: (value: number) => value.toString(),
		decode: (value: string | null) => (value ? parseInt(value) : null),
	});
</script>

The count is {$count}
<input bind:value={$count} type="number" />
```

--------------------------------

### Set Default Values for SvelteKit Query Parameters

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Demonstrates how to assign a default value to a query parameter using the `defaultValue` field within the `queryParameters` configuration. This ensures a fallback value is used if the parameter is not present in the URL, and the URL updates on initial client-side render.

```svelte
<script lang="ts">
	import { queryParameters } from 'sveltekit-search-params';

	const params = queryParameters({
		username: true,
		count: {
			encode: (value: number) => value.toString(),
			decode: (value: string | null) => (value ? parseInt(value) : null),
			defaultValue: 10,
		},
	});
</script>

<pre>
    {JSON.stringify(params, null, 2)}
</pre>
```

--------------------------------

### Write to Single URL Query Parameter Store with bind:value

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Illustrates how to update a URL query parameter by binding an input element's value directly to the Svelte store returned by `queryParam`. This allows two-way data binding, automatically updating the URL.

```svelte
<script lang="ts">
	import { queryParam } from 'sveltekit-search-params';

	const username = queryParam('username');
</script>

Your username is {$username}
<input bind:value={$username} />
```

--------------------------------

### Encode and decode URL query parameters in SvelteKit

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Explains how to provide custom 'encode' and 'decode' functions for specific parameters during 'queryParameters' initialization. This allows automatic conversion of query string values to desired data types (e.g., boolean, number, objects) and vice-versa.

```svelte
<script lang="ts">
	import { queryParameters } from 'sveltekit-search-params';

	const params = queryParameters({
		username: true,
		isCool: {
			encode: (booleanValue) => booleanValue.toString(),
			decode: (stringValue) =>
				stringValue !== null && stringValue !== 'false',
		},
	});
</script>

<pre>
    {JSON.stringify(params, null, 2)}
</pre>
```

```json
{
	"framework": "svelte",
	"isCool": true,
	"username": null
}
```

```json
{
	"framework": "svelte",
	"isCool": false,
	"username": null
}
```

--------------------------------

### SvelteKit queryParam with custom equalityFn for objects

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Illustrates how to provide a custom `equalityFn` for stores holding complex objects or arrays. This function determines if the store's value has effectively changed, preventing unnecessary reactivity triggers when the underlying data structure is the same but the reference might differ. It takes `current` and `next` values and should return `true` if they are considered equal (no reactivity needed).

```svelte
<script lang="ts">
	import { queryParam, ssp } from 'sveltekit-search-params';

	const pageNum = queryParam('pageNum', ssp.object<{ num: number }>(), {
		equalityFn(current, next) {
			return current?.num === next?.num;
		},
	});
</script>
```

--------------------------------

### Update URL query parameters reactively in SvelteKit

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

Illustrates how to treat query parameters like reactive Svelte state. By binding an input element's value to a property of the 'params' object, changes in the input automatically update the URL's query parameters.

```svelte
<script lang="ts">
	import { queryParameters } from 'sveltekit-search-params';

	const params = queryParameters();
</script>

<pre>
    {JSON.stringify(params, null, 2)}
</pre>
<input
	value={params.username}
	oninput={(e) => {
		params.username = e.target.value;
	}}
/>
```

--------------------------------

### Define Custom Equality Function for SvelteKit Search Params

Source: https://github.com/paoloricciuti/sveltekit-search-params/blob/next/README.md

This Svelte component demonstrates how to implement a custom `equalityFn` within the `queryParameters` configuration for a complex object. This function allows developers to define custom logic for determining if a parameter's value has changed, preventing unnecessary Svelte reactivity updates when only internal properties change but the overall 'shape' is considered the same.

```svelte
<script lang="ts">
	import { queryParameters } from 'sveltekit-search-params';

	const params = queryParameters({
		obj: {
			encode: (value: { value: string }) => JSON.stringify(value),
			decode: (value: string | null) =>
				value ? JSON.parse(value) : null,
			equalityFn(current, next) {
				return current?.value === next?.value;
			},
		},
	});
</script>

<pre>
    {JSON.stringify(params, null, 2)}
</pre>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.