gatsby-query-params

Get query params of the current URL in Gatsby


Keywords
gatsby, react, query, parameters, params, cra
License
GPL-3.0
Install
npm install gatsby-query-params@1.0.2

Documentation

gatsby-query-params

Get query params of the current URL in Gatsby

NPM JavaScript Style Guide

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();
  1. 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