querystate
Simple and dependency free query string state management
Installation
npm install querystate --save
Usage
all()
Get all parameters in the query string
// URL: xo.com/?rainbow=awesome&colors=red,blue,green const state = ; stateall; //=> {//=> rainbow: 'awesome',//=> colors: [//=> 'red',//=> 'blue',//=> 'green',//=> ]//=> }
get(key, [default = null])
Get a value from the query string by key, or a provided default.
// URL: xo.com/?rainbow=awesome&colors=red,blue,green const state = ; state;//=> ['red', 'blue', 'green'] state;//=> null state;//=> Merlin state;//=> 10
set(key, value)
Set a key and value pair in to the query string
set()
will by default update the actual URL when called. This can be avoided using a config Disable auto applying*
// URL: xo.com/?a=b const state = ; state;// URL: xo.com/?a=b&c=d stateall; //=> {//=> a: 'b',//=> c: 'd',//=> }
remove(key)
Remove a key and value pair in to the query string
remove()
will by default update the actual URL when called. This can be avoided using a config. Disable auto applying
// URL: xo.com/?a=b&c=d const state = ; state;// URL: xo.com/?a=b stateall; //=> {//=> a: 'b',//=> }
toQueryString()
If you want the current state as a simple query string, you can call this method
// URL: xo.com/?a=b const state = ; state; state;//=> ?a=b&c=d
Config
Casts to array
Sometimes you always want your data to be in a specific way. Let's imagine we have an API where we can limit our result
by users by providing an array of the user_ids
that we want. That API endpoint always expects an array, but if we
provide just one user in our query string, it will get parsed to a string. But there is an easy way to always cast
our data to an array.
const state = castsToArray: true ; // URL: xo.com/?user_ids=2state;//=> [2] stateall;//=> {//=> user_id: [2],//=> }
window.history.pushState
Disable auto updating of If you want to disable auto applying state when using set()
and remove()
, you may pass a config to querystate
// Using [window.location.search] as default stateconst state = autoApply: false ; // Custom stateconst state = '?foo=bar' autoApply: false ;
When setting autoApply
to false
you need to explicitly tell querystate
to update after a change.
// URL: xo.com/?a=b&c=d const state = autoApply: false ; state;// URL: xo.com/?a=b&c=d state;// URL: xo.com/?a=b
License
MIT © Daniel Eckermann