npm npm lisence npm type definitions


Try it now:

Edit bold-ellis-6rg1t

Live demo:


This is the URL with query parameters in your browser address bar:

And you want to call an API with the exact same query parameters:

API url with query parameters is updated automatically by:

  • Paste in the link of the URL with query parameters to the address bar in browser
  • Change the URL query parameters directly in the browser
  • Update Filter Options in the UI



yarn add react-filter-by-url react-router-dom

We use react-router-dom under the hood, so in the root file index.tsx, wrap the <app /> with <BrowserRouter>:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import reportWebVitals from './reportWebVitals'
import { BrowserRouter as Router } from 'react-router-dom'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement

        <App />


import { useUrlFilter } from 'react-filter-by-url'

interface ListProps {}

const DemoList: React.FC<ListProps> = ({}) => {
	// api url
	const apiUrl = ''

	// list of params to filter
	const params = ['page', 'status']

	const { apiQuery, getDefaultParamValue, handleSelectFilter } = useUrlFilter(

	return <>

You will need to pass in this hook:

Option Description
params An array of string, define all the query parameters the API has.
apiUrl A string, the base url of the API without the query parameters.

You will have access to the following values:

Option Description
apiQuery A string, API url with the query parameters (same query parameters with browser).
getDefaultParamValue A function, get the default value of a query param.
handleSelectFilter A function, handle the change in the filter options in the UI.
queryString A string, the recent query parameters.

Try toggling around the filters in the UI by using handleSelectFilter to update the URL query parameters.:

	onChange={e =>
	defaultValue={getDefaultParamValue('status', '')}
	<option value=''>All</option>
	<option value='Alive'>Alive</option>
	<option value='Dead'>Dead</option>
	<option value='unknown'>unknown</option>

Then you can simply call API every time the apiQuery changes which means URL query parameters change.

useEffect(() => {
}, [apiQuery])

const fetchApi = async () => {
	const response = await fetch(apiQuery)
	const data = await response.json()

Now you can try to change the URL query parameters in the browser or tinker around the filter UI and see the result.

Live demo:


MIT License


View Github