Gathering detailed insights and metrics for use-sync-query-params
Installations
npm install use-sync-query-paramsDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>=10
Node Version
14.17.6
NPM Version
8.6.0
Score
70.2
Supply Chain
96.7
Quality
75.5
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
1
TypeScript
TypeScript (100%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
duyth1203
Download Statistics
Total Downloads
1,643
Last Day
1
Last Week
5
Last Month
32
Last Year
393
GitHub Statistics
2 Stars
7 Commits
1 Watching
1 Branches
1 Contributors
Bundle Size
1.90 kB
Minified
825.00 B
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.1.7
Package Id
use-sync-query-params@0.1.7
Unpacked Size
45.47 kB
Size
8.27 kB
File Count
16
NPM Version
8.6.0
Node Version
14.17.6
Total Downloads
Cumulative downloads
Total Downloads
1,643
Last day
-87.5%
1
Compared to previous day
Last week
-37.5%
5
Compared to previous week
Last month
-22%
32
Compared to previous month
Last year
-20.1%
393
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Versions
use-sync-query-params
Sync React props/states to URL query params.
Purposes
- Initialize the URL query params with default ones.
- The default params can come from any source:
redux,props, computed variables...
- The default params can come from any source:
- Update query params on demand
Installation
- Using
npm
1npm install --save use-sync-query-params
- Using
yarn
yarn add use-sync-query-params
Usage examples
1import useSyncQueryParams from 'use-sync-query-params' 2 3export default function App(props) { 4 const params = useSyncQueryParams({ foo: 'bar' }) 5 // Or 6 const params = useSyncQueryParams({ foo: props.foo }) 7 // Or 8 const foo = new URLSearchParams(window.location.search).get('foo') 9 const params = useSyncQueryParams({ foo }) 10 11 return ( 12 <> 13 <p>{params.getParam('foo')}</p> 14 <p>{window.location.search}</p> 15 <pre>{JSON.stringify(params.getAllParams())}</pre> 16 <br/> 17 <button onClick={() => params.setParam('foo', 'baz')}>Change bar to baz</button> 18 <br/> 19 <button onClick={() => params.clearParam('foo')}>Clear query param</button> 20 </> 21 ) 22}
Demo
APIs
-
useSyncQueryParams(defaultParams: { [x: string]: string | number | boolean | null | undefined }) => ({ getParam, getAllParams, setParam, setParams, clearParam })Initial the hook with default params. Automatic URL query params synchronization will happen only once on mount.
-
getParam: (key: string) => stringGet specific key from query params. Autosuggestion mapped to keys of the default params.
-
getParams: (...keys: string[]) => Object<string, string>Get a set of params.
-
getAllParams: () => ObjectGet all query params. The result contains all records with keys of the default params except those that were cleared.
-
setParam: (key: string, value: string | number | boolean | null | undefined) => booleanSet a specific key with a value. Empty values (empty string, null, undefined) will be cleared.
- Return
trueif successfully set - Otherwise
falseifwindow.history.pushStateis not available
- Return
-
setParams: (Object<key: string, value: string | number | boolean | null | undefined>) => booleanSet a set of records. Empty values (empty string, null, undefined) will be cleared.
- Return
trueif successfully set - Otherwise
falseifwindow.history.pushStateis not available
- Return
-
clearParam: (key: string) => booleanClear specific key from query params. Same as
setParamwith empty value. -
clearParams: (...keys: string[]) => booleanClear a set of keys from query params. Same as
setParamswith empty values.
No vulnerabilities found.
No security vulnerabilities found.