Basic Usage

This guide demonstrates the basic usage of use-search-query hook for managing URL search parameters in your Next.js application.

Try it out

How it works

The

useSearchQuery

hook provides a simple way to manage search parameters in your application. Here's a basic example:

'use client'

import { useState } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { useSearchQuery } from 'use-search-query'

export default function SearchExample() {
  const { routeToSearchParams } = useSearchQuery()
  const pathname = usePathname()
  const [searchTerm, setSearchTerm] = useState<string>('')
  const searchParams = useSearchParams()
  const searchTermQuery = searchParams.get('searchTerm')

  function search() {
    routeToSearchParams(pathname, { searchTerm })
  }

  function resetFilters() {
    routeToSearchParams(pathname, {}, { reset: true })
  }

  return (
    <div>
      <Input
        placeholder="Enter a search term..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <Button onClick={search}>Search</Button>
      <Button onClick={resetFilters}>Reset</Button>
    </div>
  )
}