react-filter-by-url

Try it now:

Live demo: https://react-filter-by-ulr-demo.vercel.app/list

Problem

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

https://example.com/search?page=2&type=public&status=open

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

https://example.com/api/search?page=2&type=public&status=open

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

useFilter

Installation

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
)

root.render(
  <React.StrictMode>
    <Router>
        <App />
    </Router>
  </React.StrictMode>
)

Implementation

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

interface ListProps {}

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

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

	const { apiQuery, getDefaultParamValue, handleSelectFilter } = useUrlFilter(
		params,
		apiUrl
	)

	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.:

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

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

useEffect(() => {
	fetchApi()
}, [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: https://react-filter-by-ulr-demo.vercel.app/list

License

MIT License

GitHub

View Github