
Research
Malicious npm Packages Impersonate Flashbots SDKs, Targeting Ethereum Wallet Credentials
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
react-filter-by-url
Advanced tools
A React library to update API Url with query parameters by looking at query parameters in the address bar of browser.
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
yarn add react-filter-by-url
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 <>
...
</>
}
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 |
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
MIT License
FAQs
A React library to update API Url with query parameters by looking at query parameters in the address bar of browser.
The npm package react-filter-by-url receives a total of 26 weekly downloads. As such, react-filter-by-url popularity was classified as not popular.
We found that react-filter-by-url demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.