@lindeneg/query-params

Hook for query-strings using URLSearchParams.

Usage no npm install needed!

<script type="module">
  import lindenegQueryParams from 'https://cdn.skypack.dev/@lindeneg/query-params';
</script>

README

@lindeneg/query-params

typescript bundle-size license

Sandbox

React hook using URLSearchParams

Installation

yarn add @lindeneg/query-params

Arguments

Name Required Ref Type Description
params Y T Record<string, string> object with param keys and optional default values

Return

Object with properties:

Name Type Description
values T object with current param values
onParamChange (type: keyof T, value: string) => void; change param value

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