UrlRuntimeParams

Control of writing and reading URL parameters

Installation

In Browser

Include assets

Simply download and include with a script tag, UrlRuntimeParams will be registered as a global variable.

<script src="../lib/url-runtime-params.global.js"></script>

<script>
  var urlParams = new UrlRuntimeParams();
  var paramValue = urlParams.get('key');
  urlParams.set('key', 'value');
  urlParams.remove('key');
</script>
Copy

CDN

unpkg

<script src="https://unpkg.com/@nextgis/url-runtime-params"></script>
Copy

jsdelivr

<script src="https://cdn.jsdelivr.net/npm/@nextgis/url-runtime-params"></script>
Copy

We recommend linking to a specific version number /url-runtime-params@[version]

In Node.js

npm install @nextgis/url-runtime-params
Copy

Usage

import { UrlRuntimeParams } from '@nextgis/url-runtime-params';

interface MyParams {
  key1: string;
  key2: string;
}

const urlParams = new UrlRuntimeParams<MyParams>();

// Get the value of a URL parameter
const paramValue = urlParams.get('key1');
console.log(paramValue); // Output: value of 'key1' or true if it has no value

// Set the value of a URL parameter
urlParams.set('key1', 'newValue1');
console.log(urlParams.params()); // Output: { key1: 'newValue1' }

// Update multiple URL parameters
urlParams.update({ key1: 'updatedValue1', key2: 'newValue2' });
console.log(urlParams.params()); // Output: { key1: 'updatedValue1', key2: 'newValue2' }

// Remove a URL parameter
urlParams.remove('key1');
console.log(urlParams.params()); // Output: { key2: 'newValue2' }
Copy

Differences and Advantages over URLSearchParams

UrlRuntimeParams offers strong type safety through TypeScript, allowing you to define the structure of your URL parameters using interfaces. It provides a unified interface for managing URL parameters and ensures that changes update the browser's history state. Additionally, it automatically handles parameters without values by setting them to true, simplifying the management of boolean flags and similar use cases.

Commercial support

Need to fix a bug or add a feature to @nextgis/url-runtime-params? We provide custom development and support for this software. Contact us to discuss options!