url-params-handler

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-handler

Example:

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",
})