gatsby-query-params

Get query params of the current URL in Gatsby

Install

npm add gatsby-query-params

Function Signature

1. getSearchParams - Return query parameters as an object.

import { getSearchParams } from "gatsby-query-params";

const searchParams = getSearchParams();

2. useQueryParam - Return query parameter for a specific key. If it doesn't exist, returns a set default value ( default null ).

import { useQueryParam } from "gatsby-query-params";

const value = useQueryParam(key, defaultValue);

Usage

import React, {useState, useEffect} from 'react'
import { useQueryParam, getSearchParams } from "gatsby-query-params";

function App() {
  
  const name = useQueryParam("name", "Akash"); // key, defaultValue
  console.log(name); // log query param
  console.log(getSearchParams()); // Log all parameters

  return (
    <div>
      Hello
    </div>
  )
}

export default App

Example

1. Run npm start on the root folder.
2. cd example
3. npm start

Where does this library run?

Both Client-Side Rendering (CSR) & Server-Side Rendering (SSR) are supported.

License

LGPLV3 © akash-joshi