!npm
!npm lisence
!npm type definitions

react-filter-by-url

$3


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
`

$3

- 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

$3

`
yarn add react-filter-by-url
`

$3

`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', '')}
>
All
Alive
Dead
unknown

`

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

License

MIT License