@resourge/react-search-params NPM

React-search-params

react-search-params is a simple hook to control current url. Also provides some methods that extend URLSearchParams.

Features

Add's beforeURLChange and URLChange event to native javascript.
Has no dependencies.
It uses javascript URLSearchParams to parse search.
Decodes search params into primitive values. (ex: "?productId=10&productName=Apple" will become { product: 10, productName: "Apple" }).
react-search-params doesn't do navigation by itself. This gives the developer the control or the ability to use it's own navigation system. see more in Usage
parseParams, parseSearch method's that extend URLSearchParams

Installation

Install using Yarn:

yarn add @resourge/react-search-params

or NPM:

npm install @resourge/react-search-params --save

Basic usage

import React from 'react';
import { useSearchParams } from '@resourge/react-search-params';

export default function Form() {
  const [params, setParams] = useSearchParams(
    ({ url }) => window.history.replaceState(null, '', url.href)
  )

  return (
    <div> 
	  App
      <button onClick={() => setParams({ productId: Math.random() })}>
        Set new params
      </button>
	</div>
  );
}

Documentation

useSearchParams

const [params, setParams] = useSearchParams(
  // Method to control navigation
  ({ url }) => window.history.replaceState(null, '', url.href),
  // Ex: react-router ({ url }) => history.replace(url.href),
  { }, // default params
  { } // config
)

Config

Name	Type	Required	Description
navigate	`(config: SearchParams<T>) => void`	true	Method to navigate.
defaultParams	`object`	false	To define default values
config	`{ hash?: boolean }`	false	When hash is true it will use `URL hash` instead of `URL` to get `search`

useUrl

Returns the current URL object.

const url = useUrl();

Methods

parseParams

Params object into search path

import { parseParams } from '@resourge/react-search-params';

parseParams({
  productId: 10,
  productName: 'Apple'
})
// ?productId=10&productName=Apple

parseSearchParams

Convert search params into true primitive values.

import { parseSearchParams } from '@resourge/react-search-params';

const searchParams = new URLSearchParams();
searchParams.set('productId', String(10))

const obj = parseSearchParams(searchParams)
// {
//   productId: 10
// }

parseSearch

Converts search string into object.

import { parseSearch } from '@resourge/react-search-params';

parseSearch('?productId=10&productName=Apple')
// {
//   productId: 10,
//   productName: 'Apple'
// }