Package Exports

@resourge/react-search-params
@resourge/react-search-params/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@resourge/react-search-params) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.