Use Query Param
A React Hook that extracts query params from a URL query string and returns a queried object.
Installation
npm install use-query-param
Usage
;
Case One:
Importing module into file
; OR const useQueryParam = ;
Without an argument
import useEffect from 'react'; const Component = const queryParams = ; // <== HOOK
With an argument
import useEffect from 'react'; const Component = const queryString = 'http://localhost?typescript=true&hook=true'; const queryParams = ; ;
Case Two:
Importing module into file
The getQueryParams takes a string and returns an object
; OR const getQueryParams = ;
Without an argument
const queryParams = ; // <== 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
const queryString = '?typescript=true&hook=true';const queryParams = ; // <== 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
; OR const setQueryParams = ;
Without an argument
const queryString = ; // <== This is not a hook // Output: '?token='jdkjada9s7d9akad....'
With an argument
const queryObject = typescript: 'true' hook: 'true' ;const queryString = ; // <== This is not a hook // '?typescript=true&hook=true'
Note
Note that the getQueryParams and setQueryParams are not hooks, rather they are auxiliary functions