Svelte Param Store
A store helping you synchronize your app state and the URL!
Installation
Usage
Create a new store and then use it as any other state variable.
Output:
Notice the URL when you enter a value in the input!
Since the URL is updated, the load function is re-executed with the new query params. This can then be used to fetch new data from an API. Take a look at the full demo to see this in action.
Debounce
Often you dont want to execute the load function on every keystroke. Setting a debounce value will delay the execution of the load function until the user has stopped typing for the given amount of time.
Output:
The output looks the same, but pay attention to when the URL updates!
Multiple
Sometimes you want to allow for multiple values for the same key. For example when working with checkboxes:
Output:
Update Programmatically
You can update the value of the store programmatically as you would with any other store:
Output:
Store API
Attributes
Name
Type
Description
Required
Key
string
The name of the key. This is what will be displayed as the key in the URL.
Yes
Options Attributes
Name
Type
Description
Default
Deboune
number
Number of milliseconds between keystrokes before the state and the URL updates.
undefined
Multiple
boolean
Wether or not it should accept multiple values for the same key.
false
Exposed function
useParamStore expose all the default store functions such as; .subscribe(), .update(), and .set(). These works the same as the default store functions. The table belove descripts additional functions exposed by useParamStore.
Signature
Description
.setImmediate(value: string)
Sets the value of the store immediately, omitting the debounce timer if debounce is enabled.