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'
// }

License

MIT Licensed.