@kevinangkajaya/use-url-search-params v1.1.2

Use URL Search Params

Introduction

Only for NextJS! Custom hook using UrlSearchParams to automate link given in the url. For example, when you are changing <input type="text" id="name" value="John" />, the result would appear in url (http://localhost?name=John)

Installing as a package

npm install @kevinangkajaya/use-url-search-params

Usage

import initUrlSearchParam from '@kevinangkajaya/use-url-search-params';
import { useRouter } from 'next/router';

const router = useRouter()
const initialValue = ""
const urlSearchParamKey = "name"
const giveDelay = true

const useUrlSearchParam = initUrlSearchParam(router)

const [name, set_name] = useUrlSearchParam(initialValue, urlSearchParamKey, giveDelay)

return(
    <input type="search" id="name" className="form-control" value={name}
        title="Search name" placeholder="Search name"
        onChange={(e) => set_name(e.target.value)} />
)

Props initUrlSearchParam

Props useUrlSearchParam

Return Value initUrlSearchParam

Closure function to call useUrlSearchParam

Return Value useUrlSearchParam

ReactJS Custom Hook