
Research
Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique
A malicious package uses a QR code as steganography in an innovative technique.
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.
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
A malicious package uses a QR code as steganography in an innovative technique.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.
Application Security
/Research
/Security News
Socket detected multiple compromised CrowdStrike npm packages, continuing the "Shai-Hulud" supply chain attack that has now impacted nearly 500 packages.