Use Query Param

    

A React Hook that extracts query params from a URL query string and returns a queried object.

Published Built With

Installation

``bash
npm install use-query-param
`

Usage


`js
import { useQueryParam, getQueryParams, setQueryParams } from 'use-query-param';
`

Case One:

##### Importing module into file

`js
import { useQueryParam } from 'use-query-param';

OR

const { useQueryParam } = require('use-query-param');
`

Without an argument
`jsx
import { useEffect } from 'react';

const Component = () => {
const { queryParams } = useQueryParam(); // <== HOOK

useEffect(() => {
console.log(queryParams);
// result will be an object of query params
}, [queryParams])
}
`

With an argument
`jsx
import { useEffect } from 'react';

const Component = () => {
const queryString = 'http://localhost?typescript=true&hook=true';
const { queryParams } = useQueryParam(queryString);

useEffect(() => {
console.log(queryParams);
// Output: { typescript: 'true', hook: 'true' }
}, [queryParams]);
}

`

Case Two:

##### Importing module into file
The getQueryParams takes a string and returns an object

`js
import { getQueryParams } from 'use-query-param';

OR

const { getQueryParams } = require('use-query-param');
`

Without an argument
`jsx
const { queryParams } = getQueryParams(); // <== This is not a hook

If a URL query string exist on the browser address bar you will get an output with all the query params OR an empty object
// Output: { token: 'jdkjada9s7d9akadbjkss893asda89' }

OR

// Output: {} => Empty object
`

With an argument
`js
const queryString = '?typescript=true&hook=true';
const { queryParams } = getQueryParams(queryString); // <== This is not a hook

// Output: { typescript: 'true', hook: 'true' }
`

Case Three:

##### Importing module into file
The setQueryParams takes an object and returns a query formatted string

`js
import { setQueryParams } from 'use-query-param';

OR

const { setQueryParams } = require('use-query-param');
`


Without an argument
`js
const { queryString } = setQueryParams(); // <== This is not a hook

// Output: '?token='jdkjada9s7d9akad....'
`

With an argument
`js
const queryObject = { typescript: 'true', hook: 'true' };
const { queryString } = getQueryParams(queryString); // <== This is not a hook

// '?typescript=true&hook=true'
``

$3

Note that the getQueryParams and setQueryParams are not hooks, rather they are auxiliary functions