0.0.8 • Published 2 years ago
url-params-handler v0.0.8
Simple URL Params Handler
Simple functions for saving/removing your data to/from the url searchParams and synchronizing DOM elements with (basically a helper function I've been using in my projects and got tired of copying it every time)
Getting Started
$ npm install -D url-params-handlerExample:
import "url-params-handler"This will automatically add the handlers to all DOM elements with data-url-params attribute.
<input
type="checkbox"
id="catId"
data-url-params
data-params-key="category"
value="catId" />
<label for="catId">Category</label>
<div class="button"
data-url-params
data-params-key="anotherCategory"
data-params-value="anotherCatId">
Another Category
</div>API
DOM attributes options
| Name | isRequired | Default value | Description |
|---|---|---|---|
| data-url-params | true | initializes handlers | |
| data-params-key | true | null | defines the key |
| data-params-value | true | null | defines the value (not required for elements with value attr.) |
| data-params-action | false | "preserve" | defines the action type |
Options for data-params-action
| Value | Descrition |
|---|---|
"preserve" | Saves the current key value pair; replaces the old one with the same key but different value; preserves if the values is the same |
"replace" | Same as "preserve" but removes the key value pair if the value is the same |
"add" | Adds comma separated values for key value pair with the same key; removes the value if the value was previously added |
Available functions
import { getURLparams, updateURLparams } from "url-params-hanlder"getURLparams() returns the object of the current URLsearchParams. Example:
https://yourwebsite.com?categories=videos,insights,news,articles&userId=12&location=US
The URL above will return:
{
categories: ['videos', 'insights', 'news', 'articles'],
userId: '12',
location: 'US',
}updateURLparams() updates URLsearchParams with the following options (options similar to DOM attributes) :
updateURLparams({
key: "userId",
value: 12,
action: "replace",
})