Using with Form

This guide demonstrates how to integrate use-search-query with form elements to manage multiple search parameters simultaneously.

Try it out

How it works

When working with forms, you often need to manage multiple input fields and synchronize them with URL search parameters. The

useSearchQuery

hook makes this simple:

'use client'

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

interface FormInputs {
  firstName: string
  lastName: string
  email: string
}

export default function UserSearchForm() {
  const { routeToSearchParams } = useSearchQuery()
  const pathname = usePathname()
  const searchParams = useSearchParams()

  const { register, handleSubmit } = useForm<FormInputs>({
    defaultValues: {
      firstName: searchParams.get('firstName') || '',
      lastName: searchParams.get('lastName') || '',
      email: searchParams.get('email') || ''
    }
  })

  function onSubmit(data: FormInputs) {
    routeToSearchParams(pathname, {
      firstName: data.firstName || undefined,
      lastName: data.lastName || undefined,
      email: data.email || undefined
    })
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Input
        placeholder="First name..."
        {...register('firstName')}
      />
      <Input
        placeholder="Last name..."
        {...register('lastName')}
      />
      <Input
        type="email"
        placeholder="Email..."
        {...register('email')}
      />
      <Button type="submit">Apply Filters</Button>
    </form>
  )
}