Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(useUrlState): update docs and test case for multi-state management #2125

Merged
merged 8 commits into from
Apr 7, 2023
Merged

docs(useUrlState): update docs and test case for multi-state management #2125

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
39d75cd
feat: useUrlState can handle multiple useUrlState updates simultaneously
miracles1919 Mar 16, 2023
9f9d96e
Merge branch 'master' into feat/983
liuyib Mar 17, 2023
bf461a0
fix: change text
51wangping Mar 21, 2023
1378f96
fix: change text
51wangping Mar 21, 2023
e0c0534
Merge branch 'master' into feat/983
liuyib Mar 23, 2023
b481c85
fix: do not use promise
51wangping Mar 24, 2023
66565ca
Merge branch 'master' into feat/983
liuyib Mar 25, 2023
2fe065a
Merge branch 'master' into feat/983
51wangping Mar 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
85 changes: 85 additions & 0 deletions packages/use-url-state/demo/demo4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
/**
* title: Multi-state management (split)
* desc: useUrlState can handle multiple useUrlState updates simultaneously
*
* title.zh-CN: 多状态管理 (拆分)
* desc.zh-CN: useUrlState 可以同时处理多个 useUrlState 更新
liuyib marked this conversation as resolved.
Show resolved Hide resolved
liuyib marked this conversation as resolved.
Show resolved Hide resolved
*/

import React from 'react';
import useUrlState from '@ahooksjs/use-url-state';

export default () => {
const [page, setPage] = useUrlState({ page: '1' });
const [pageSize, setPageSize] = useUrlState({ pageSize: '10' });

return (
<>
<div>
page: {page.page}
<span style={{ paddingLeft: 8 }}>
<button
onClick={() => {
setPage((s) => ({ page: Number(s.page) + 1 }));
}}
>
+
</button>
<button
onClick={() => {
setPage((s) => ({ page: Number(s.page) - 1 }));
}}
style={{ margin: '0 8px' }}
>
-
</button>
<button
onClick={() => {
setPage({ page: undefined });
}}
>
reset
</button>
</span>
</div>
<br />
<div>
pageSize: {pageSize.pageSize}
<span style={{ paddingLeft: 8 }}>
<button
onClick={() => {
setPageSize((s) => ({ pageSize: Number(s.pageSize) + 1 }));
}}
>
+
</button>
<button
onClick={() => {
setPageSize((s) => ({ pageSize: Number(s.pageSize) - 1 }));
}}
style={{ margin: '0 8px' }}
>
-
</button>
<button
onClick={() => {
setPageSize({ pageSize: undefined });
}}
>
reset
</button>
</span>
</div>
<div>
<button
onClick={async () => {
await setPageSize({ pageSize: undefined });
await setPage({ page: undefined });
}}
>
reset all
</button>
</div>
</>
);
};
19 changes: 11 additions & 8 deletions packages/use-url-state/use-url-state.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ npm i @ahooksjs/use-url-state -S
>
> 2\. Installed @ahooksjs/use-url-state


## Usage

```js
Expand All @@ -44,6 +43,10 @@ React Router V6：https://codesandbox.io/s/autumn-shape-odrt9?file=/App.tsx

<code src="./demo/demo2.tsx" hideActions='["CSB"]' />

### Multi-state management (split)

<code src="./demo/demo4.tsx" hideActions='["CSB"]' />

### Custom query-string options

<code src="./demo/demo3.tsx" hideActions='["CSB"]' />
Expand All @@ -57,21 +60,21 @@ const [state, setState] = useUrlState(initialState, options);
### Params

| Property | Description | Type | Default |
|--------------|--------------------------------|----------------|---------|
| ------------ | ------------------------------ | -------------- | ------- |
| initialState | InitialState, same as useState | `S \| () => S` | - |
| options | Url config | `Options` | - |

### Options

| Property | Description | Type | Default |
|------------------|--------------------------------------------------------------------------------------------------------------|-----------------------|----------|
| navigateMode | Type of history navigate mode | `'push' \| 'replace'` | `'push'` |
| parseOptions | [parse](https://github.com/sindresorhus/query-string#parsestring-options) options of `query-string` | `ParseOptions` | - |
| stringifyOptions | [stringify](https://github.com/sindresorhus/query-string#stringifyobject-options) options of `query-string` | `StringifyOptions` | - |
| Property | Description | Type | Default |
| ---------------- | ----------------------------------------------------------------------------------------------------------- | --------------------- | -------- |
| navigateMode | Type of history navigate mode | `'push' \| 'replace'` | `'push'` |
| parseOptions | [parse](https://github.com/sindresorhus/query-string#parsestring-options) options of `query-string` | `ParseOptions` | - |
| stringifyOptions | [stringify](https://github.com/sindresorhus/query-string#stringifyobject-options) options of `query-string` | `StringifyOptions` | - |

### Result

| Property | Description | Type |
|----------|----------------------------------------------|---------------------------------------------------|
| -------- | -------------------------------------------- | ------------------------------------------------- |
| state | Url query object | `object` |
| setState | Same as useState, but state should be object | `(state: S) => void \| (() => ((state: S) => S))` |
10 changes: 7 additions & 3 deletions packages/use-url-state/use-url-state.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,10 @@ React Router V6：https://codesandbox.io/s/autumn-shape-odrt9?file=/App.tsx

<code src="./demo/demo2.tsx" hideActions='["CSB"]' />

### 多状态管理（拆分）

<code src="./demo/demo4.tsx" hideActions='["CSB"]' />

### 自定义 query-string 配置

<code src="./demo/demo3.tsx" hideActions='["CSB"]' />
Expand All @@ -56,21 +60,21 @@ const [state, setState] = useUrlState(initialState, options);
### Params

| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------|----------------|--------|
| ------------ | -------- | -------------- | ------ |
| initialState | 初始状态 | `S \| () => S` | - |
| options | url 配置 | `Options` | - |

### Options

| 参数 | 说明 | 类型 | 默认值 |
|------------------|---------------------------------------------------------------------------------------------------------|-----------------------|----------|
| ---------------- | ------------------------------------------------------------------------------------------------------- | --------------------- | -------- |
| navigateMode | 状态变更时切换 history 的方式 | `'push' \| 'replace'` | `'push'` |
| parseOptions | `query-string` [parse](https://github.com/sindresorhus/query-string#parsestring-options) 的配置 | `ParseOptions` | - |
| stringifyOptions | `query-string` [stringify](https://github.com/sindresorhus/query-string#stringifyobject-options) 的配置 | `StringifyOptions` | - |

### Result

| 参数 | 说明 | 类型 |
|----------|-----------------------------------------|---------------------------------------------------|
| -------- | --------------------------------------- | ------------------------------------------------- |
| state | url query 对象 | `object` |
| setState | 用法同 useState，但 state 需要是 object | `(state: S) => void \| (() => ((state: S) => S))` |