@lindeneg/query-params v1.1.4

@lindeneg/query-params

Sandbox

React hook using URLSearchParams

Installation

yarn add @lindeneg/query-params

Arguments

Return

Object with properties:

Usage

function SomeComponent() {
  const { values, onParamChange } = useQueryParams({
    id: '',
    context: '',
    // optional default value
    sort: 'desc',
  });
}

This will result in window.location.search having the value ?sort=desc. If sort also was an empty string, then window.location.search would be empty.

Update param as follows:

onParamChange('context', 'products');

Now window.location.search will be ?context=products&sort=desc

To remove it, use an empty string:

onParamChange('context', '');

Now window.location.search will be ?sort=desc

If default values are specified, an empty string will not remove the key but rather use the default value instead.

So, if sort is changed

onParamChange('sort', 'asc');

Then window.location.search will of course be ?sort=asc

However, if the key is removed

onParamChange('sort', '');

The default value will be used and window.location.search will be ?sort=desc