A React library to update API Url with query parameters by looking at query parameters in the address bar of browser.
npm install react-filter-by-url!npm
!npm lisence
!npm type definitions


Live demo: https://react-filter-by-ulr-demo.vercel.app/list
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
- 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
`jsx`
import { useUrlFilter } from 'react-filter-by-url'
`jsx
interface ListProps {}
const DemoList: React.FC
// 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:
`jsx`
name='status'
onChange={e =>
handleSelectFilter(e.target.name, e.target.value)
}
defaultValue={getDefaultParamValue('status', '')}
>
Then you can simply call API every time the apiQuery changes which means URL query parameters change.
`jsx
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
MIT License