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.

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