npmpackage.info

sync-query

Synchronize the React State and url query automatically by using the React higher-order component.

0.2.13

MIT

TypeScript

13.60 kB

3,894 1.7

Installations

npm install sync-query

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

12.14.0

NPM Version

6.13.4 Score

78.4

Supply Chain

99.2

Quality

75.9

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

25

Total

32

Closed

7

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 1 contributors

Languages

TypeScript

JavaScript

TypeScript (93.67%)

JavaScript (6.33%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

NeoYo

Download Statistics

Total Downloads

3,894

Last Day

Last Week

Last Month

Last Year

432

GitHub Statistics

6 Stars

47 Commits

2 Watching

27 Branches

1 Contributors

Bundle Size

48.80 kB

Minified

13.60 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

0.2.13

Package Id

sync-query@0.2.13

Unpacked Size

7.77 MB

Size

6.12 MB

File Count

NPM Version

6.13.4

Node Version

12.14.0

Total Downloads

Cumulative downloads

Total Downloads

3,894

Last day

Compared to previous day

Last week

21.4%

Compared to previous week

Last month

173.1%

Compared to previous month

Last year

6.4%

432

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

@babel/core @babel/preset-env @types/jest babel-loader clean-webpack-plugin cross-env html-webpack-plugin jest ts-jest ts-loader typescript webpack webpack-bundle-analyzer webpack-cli webpack-dev-server

Versions

sync-query

❄️

使用 React 高阶组件，实现将 React state 存储在 URL query

English

Demo

^_^ 这是一个在 antd-design 里使用该库的实例

只需要 3 行代码！

1// import
2import { syncQueryHOC } from "sync-query";
3// use syncQueryHOC
4const MyComponentEnhance = syncQueryHOC(MyComponent, ['searchInput', 'pagination'], 'fetch');
5<MyComponentEnhance></MyComponentEnhance>
6//...

更多关于这个例子，请点击这里

一旦我们这样做了，就拥有了下面使用的功能。

基础功能

自动同步 react state 到 url query (URLSearchParam)
自动调用回调函数（比如网络请求等），当 react state 发生变化时.
自动从 url query (URLSearchParam) ，初始化 react state
零依赖，只有 2.8kb gzipped 大小（查看JS体积优化过程）

安装

yarn add sync-query

npm i --save sync-query

使用说明

Use TypeScript Decorator

1import { SyncQueryFactory, syncQueryCb } from "sync-query";
2
3@SyncQueryFactory(['searchInput', 'pagination']) // 监听到 searchInput 或 pagination 变化时同步到 URL query
4export class MyComponent extends Component {
5    this.state = {
6        searchInput: 'hello world',
7        pagination: {
8        },
9    }
10    @syncQueryCb(['searchInput']) // 监听到 searchInput 变化时调用 fetch 函数
11    fetch() {
12        // network fetch...
13    }
14}

Use ES6 React HOC

1import { syncQueryHOC } from "sync-query";
2
3export class MyComponent extends Component {
4    fetch() {
5        // network fetch...
6    }
7}
8
9export const MyComponentEnhance = 
10    syncQueryHOC(
11        MyComponent,
12        ['searchInput', 'pagination'], // 监听到 searchInput 或 pagination 变化时同步到 URL query
13        'fetch',
14        {
15            callbackDeps: ['searchInput'], // 监听到 searchInput 变化时调用 fetch 函数
16            wait: 600, // 函数防抖，600ms
17        }
18    );

注意: SyncQueryFactory 装饰器工厂和 syncQueryHOC 要放在离 MyComponent 最近的位置

其他说明

手动同步

该库会自动存储 state 到 url query，同时触发 callback 函数

关闭的方法是，在类装饰器配置中增加 disableAutoSync

手动同步的方法是 (this as SyncQueryHost).triggerSync),

triggerSync 该方法的调用，会同步state到路由参数

示例代码如下：

1@SyncQueryFactory(
2    ['pagination', 'searchInput'],
3    null,
4    {
5        disableAutoSync: true
6    }
7)
8class MyComponent extends Component {
9    onHandlePageChange(current) {
10        this.setState(
11            {
12                pagination: {
13                    ...this.state.pagination,
14                    current,
15                },
16            },
17            this.fetchTable
18        );
19    }
20    fetchTable() {
21        (this as any).triggerSync();
22        // fetch network...
23    }
24}

注意： (this as any).triggerSync() 要在 componentDidMount 和之后的声明周期才被初始化。

API

syncQueryHOC

接收一个 React 组件，返回带有同步 state 到路由参数功能的组件

syncQueryHOC(WrappedComponent, stateList: string[], callbackName?:string, config?:SyncQueryConfig): EnhanceComponent

WrappedComponent: 被装饰的原始组件
stateList: 传一个数组，state 中对应 key 的值会被监听
callbackName?: 监听到变化时，触发 effect 方法

config?: SyncQueryConfig

1type SyncQueryConfig = {
2    wait: number,                           // 函数防抖的等待时间， 单位 ms
3    callbackDeps?: string[],                // callbackDeps 存放 state key 的数组，监听到 state 中对应key 的 value 变化时，会调用 callback（网络请求等）
4                                            // callbackDeps 没有传入时，默认监听的内容等于 stateList
5    parser?: IQueryParser,                  // 解析器：用于将路由参数 query 解析到 state，默认是 JSON.parse
6    stringify?: IQueryStringify,            // 生成器：用于生成 state 对应的 query 字符串，默认是 JSON.stringify
7}

SyncQueryFactory

SyncQueryFactory 装饰器工厂，在 typescript 中使用

SyncQueryFactory(stateList: string[], callbackName?:string, config?:SyncQueryConfig)

注意类装饰器工厂 SyncQueryFactory 和方法装饰器 syncQueryCb 可以配合使用，高阶组件 syncQueryHOC 与前两者尽量避免共用。

stateList: 传一个数组，state 中对应 key 的值会被监听
callbackName?: 监听到变化时，触发 effect 方法

config?: SyncQueryConfig

1type SyncQueryConfig = {
2    wait: number,                           // 函数防抖的等待时间， 单位 ms
3    callbackDeps?: string[],                // callbackDeps 存放 state key 的数组，监听到 state 中对应key 的 value 变化时，会调用 callback（网络请求等）
4                                            // callbackDeps 没有传入时，默认监听的内容等于 stateList
5    parser?: IQueryParser,                  // 解析器：用于将路由参数 query 解析到 state，默认是 JSON.parse
6    stringify?: IQueryStringify,            // 生成器：用于生成 state 对应的 query 字符串，默认是 JSON.stringify
7}

代码实现如下：

1function SyncQueryFactory(stateList: string[], callbackName?:string, config?:SyncQueryConfig) {
2    return function(WrappedComponent) {
3        return syncQueryHOC(WrappedComponent, stateList, callbackName, config);
4    }
5}

syncQueryCb

syncQueryCb 方法装饰器，与 SyncQueryFactory 配合使用

syncQueryCb(callbackDeps?:string[])

callbackDeps?: string[] callbackDeps 存放 state key 的数组，监听到 state 中对应key 的 value 变化时，会调用 callback（网络请求等）

使用示例：

1import { SyncQueryFactory, syncQueryCb } from "sync-query";
2
3@SyncQueryFactory(['searchInput', 'pagination']) // 监听到 searchInput 或 pagination 变化时同步到 URL query
4export class MyComponent extends Component {
5
6    @syncQueryCb(['searchInput']) // 监听到 searchInput 变化时调用 fetch 函数
7    fetch() {
8        // network fetch...
9    }
10}

License

MIT

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

SAST

Determines if the project uses static code analysis.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

97 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-r6rj-9ch6-g264
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-cwx2-736x-mf6w
Warn: Project is vulnerable to: GHSA-v39p-96qg-c8rf
Warn: Project is vulnerable to: GHSA-8v63-cqqc-6r2c
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

1.7

/10

Last Scanned on 2025-02-03

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to sync-query

@tanstack/query-sync-storage-persister

5.65.0

A persister for synchronous storages, to be used with TanStack/Query

redux-query-sync

0.1.10

Synchronise URL query parameters and redux state.

use-query-sync-data

1.0.1

A composition API that sync url query to data base on Vue3.

mysql-sync-query

1.0.4

Extends the mysql package to support executing queries synchronously.