React SearchParams

Overview

React SearchParams is a valuable feature provided by React Router, offering the useSearchParams hook for efficient management of query parameters in your React applications.

This feature simplifies the process of reading and updating query string parameters, allowing developers to seamlessly handle dynamic data and enhance search functionality within their applications

Usage

import { useSearchParams, createSearchParams } from 'react-router-dom'

export function Apps() {
  const [searchParams, setSearchParams] = useSearchParams()
  const search = searchParams.get('search') || ''

  const onChange = (event) => {
    const name = event.target.name
    const params = { [name]: event.target.value }
    const newSearchParams = createSearchParams(params)
    setSearchParams(newSearchParams)
  }

  return (
    <div>
        <input name="search" value={search} onChange={onChange} placeholder="search product..." />
    </div>
  )
}

Overview

Usage

Demo