React-filter-by-url NPM

npm npm lisence npm type definitions

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

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.
`refreshParams`	(Optional) an Array of string, represents query params need to refresh to the defaul ones. Ex: refresh page=1 when there is a change in other query params

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