Configuration including the query param selector and state transformation via SelectQueryParamOptions
A PropertyDecorator that sets up automatic subscription to the query parameter
Subscribes to: Navigator
Updates: The decorated property with the query parameter value. The value is
parsed with JSON.parse() when possible, so the type may be string,
number, boolean, an array, an object, or undefined if the parameter
is not present
URL-aware: Automatically updates when the URL changes
Lifecycle: Automatically subscribes in connectedCallback and
unsubscribes in disconnectedCallback
import { State } from '@stencil/core';
import { SelectQueryParam } from '@limetech/lime-web-components';
class SearchComponent {
@State()
@SelectQueryParam({ selector: 'query' })
private searchQuery: string;
}
import { State } from '@stencil/core';
import { SelectQueryParam } from '@limetech/lime-web-components';
class PagedList {
// A numeric value like `?page=2` arrives already parsed as a number
@State()
@SelectQueryParam({
selector: 'page',
map: [(page) => (typeof page === 'number' ? page : 1)],
})
private currentPage: number;
}
Decorator that subscribes to a specific query parameter from the Navigator.
This decorator automatically updates the decorated property whenever the specified query parameter changes in the URL. It's useful for components that need to react to URL changes without manually parsing the location. It's the recommended approach over manual subscriptions as it handles subscription lifecycle automatically.