Use Search Query Github NPM

setSearchParams


This function returns a new query string without triggering navigation.


ParameterTypeRequiredDescription
updatesRecord<string, string | number | undefined | null>YesAn object containing your query updates. It generates a query string while preserving existing parameters.
optionsSetOptionsNoSee below

SetOptions parameters


ParameterTypeRequiredDescription
resetbooleanNoDefault value is false. If true resets all search parameters. Removes existing search params and adds new parameters from the updates object.
"use client"
import { useSearchQuery } from 'use-search-query'
import { usePathname, useRouter } from 'next/navigation'
import { useState } from 'react'








export default function Page() {




    const pathname = usePathname()
    const router = useRouter()


    const { setSearchParams } = useSearchQuery()


    const [searchTerm, setSearchTerm] = useState<string>('')
    const [page, setPage] = useState<number>(1)


    return (
        <div>
            <input
            placeholder="Search a name..."
            onChange={((e) => {
                setSearchTerm(e.target.value)
            })}
            />
            <button
            onClick={routeToPage}
            >
                Search
            </button>
            <button
            onClick={() => {


                // Updates a single value without affecting other existing search params. Here, only the page number changes; the searchTerm remains the same.
                const newSearchQuery = setSearchParams({ page: page - 1 })
                router.replace(`${pathname}?${newSearchQuery}`)
                setPage((prev) => prev - 1)
            }}
            >
                Previous Page
            </button>
            <button
            onClick={() => {
                // Updates a single value without affecting other existing search params. Here, only the page number changes; the searchTerm remains the same.
                const newSearchQuery = setSearchParams({ page: page + 1 })
                router.replace(`${pathname}?${newSearchQuery}`)
                setPage((prev) => prev + 1)
            }}
            >
                Next Page
            </button>
            <button
            onClick={() => {
                // Resets all search parameters. Removes existing search params and adding new parameters from the updates object.
                const newSearchQuery = setSearchParams({}, { reset: true })
                router.replace(`${pathname}?${newSearchQuery}`)
            }}
            >
                Reset Filters
            </button>
        </div>
    )


    function routeToPage() {


        // Removes page parameter from search params.
        setPage(1)
        const newSearchQuery = setSearchParams({ term: serachTerm, page: undefined })
        router.replace(`${pathname}?${newSearchQuery}`)
    }
}