Use Query Param

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

<a href="https://www.npmjs.com/package/use-query-param" style="display: inline-flex; justify-content: space-between; align-items: center; text-decoration: none; width:100px; height: 15px; background: #000; padding: 5px; border-radius: 5px; border: 0.5px solid #fff"><img src="https://res.cloudinary.com/shaolinmkz/image/upload/v1588875312/Random-Icons/react/npm_1.png" width="30"> <span style="color: #fff; font-size: 9pt">Published</span></a> <a href="https://reactjs.org/" style="display: inline-flex; justify-content: space-between; align-items: center; text-decoration: none; width:100px; height: 15px; background: #000; padding: 5px; border-radius: 5px; border: 0.5px solid #fff"><img src="https://res.cloudinary.com/shaolinmkz/image/upload/v1588509178/Random-Icons/react/react-icon.gif" width="20"> <span style="color: #fff; font-size: 9pt">Built With</span></a>

Installation

npm install use-query-param

Usage

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

Case One:

Importing module into file

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

OR

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

Without an argument

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

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

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

OR

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

Without an argument

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

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

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

OR

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

Without an argument

const { queryString } = setQueryParams(); // <== This is not a hook

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

With an argument

const queryObject = { typescript: 'true', hook: 'true' };
const { queryString } = getQueryParams(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