-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: useUrlState * feat: rewrite based on RFC * docs: update useUrlState doc * docs: update api * docs: add getter and setter docs * fix: edge cases * feat: rewrite useUrlState based on react-router * perf: typescript definition * feat: move useUrlState into seperate package * test: fix test cases * feat: refactor useUrlState * test: fix useUrlState test * doc: optimiz useUrlState doc * chore: remove initialState delete when set to undefined Co-authored-by: 砖家 <brickspert.fjl@antfin.com>
- Loading branch information
1 parent
b9c4e51
commit a91dd7d
Showing
18 changed files
with
495 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| # useUrlState | ||
|
|
||
| A hook that stores the state into url query parameters. | ||
|
|
||
| ## Installing | ||
|
|
||
| Inside your React project directory, run the following: | ||
|
|
||
| ```bash | ||
| yarn add @ahooksjs/use-url-state -S | ||
| ``` | ||
|
|
||
| Or with npm: | ||
|
|
||
| ```bash | ||
| npm install @ahooksjs/use-url-state -S | ||
| ``` | ||
|
|
||
| ## Example | ||
|
|
||
| ```javascript | ||
| import useUrlState from '@ahooksjs/use-url-state'; | ||
|
|
||
| const [state, setState] = useUrlState({ demoCount: '1' }); | ||
| ``` | ||
|
|
||
| ## Documentation | ||
|
|
||
| https://ahooks.js.org/hooks/state/use-url-state |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| /** | ||
| * title: Default usage | ||
| * desc: store the state into url query parameter | ||
| * | ||
| * title.zh-CN: 默认用法 | ||
| * desc.zh-CN: 将状态同步到 url query 中 | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import useUrlState from '@ahooksjs/use-url-state'; | ||
|
|
||
| export default () => { | ||
| const [state, setState] = useUrlState({ count: '1' }); | ||
|
|
||
| return ( | ||
| <> | ||
| <button | ||
| style={{ marginRight: 8 }} | ||
| type="button" | ||
| onClick={() => setState({ count: Number(state.count || 0) + 1 })} | ||
| > | ||
| add | ||
| </button> | ||
| <button type="button" onClick={() => setState({ count: undefined })}> | ||
| clear | ||
| </button> | ||
| <div>state: {state?.count}</div> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| /** | ||
| * title: Multi-state management | ||
| * desc: useUrlState can manage multiple states at the same time | ||
| * | ||
| * title.zh-CN: 多状态管理 | ||
| * desc.zh-CN: useUrlState 可以同时管理多个状态 | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import useUrlState from '@ahooksjs/use-url-state'; | ||
|
|
||
| export default () => { | ||
| const [state, setState] = useUrlState( | ||
| { page: '1', pageSize: '10' }, | ||
| { | ||
| navigateMode: 'push', | ||
| }, | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| <div> | ||
| page: {state.page} | ||
| <span style={{ paddingLeft: 8 }}> | ||
| <button | ||
| onClick={() => { | ||
| setState((s) => ({ page: Number(s.page) + 1 })); | ||
| }} | ||
| > | ||
| + | ||
| </button> | ||
| <button | ||
| onClick={() => { | ||
| setState((s) => ({ page: Number(s.page) - 1 })); | ||
| }} | ||
| style={{ margin: '0 8px' }} | ||
| > | ||
| - | ||
| </button> | ||
| <button | ||
| onClick={() => { | ||
| setState({ page: 1 }); | ||
| }} | ||
| > | ||
| reset | ||
| </button> | ||
| </span> | ||
| </div> | ||
| <br /> | ||
| <div> | ||
| pageSize: {state.pageSize} | ||
| <span style={{ paddingLeft: 8 }}> | ||
| <button | ||
| onClick={() => { | ||
| setState((s) => ({ pageSize: Number(s.pageSize) + 1 })); | ||
| }} | ||
| > | ||
| + | ||
| </button> | ||
| <button | ||
| onClick={() => { | ||
| setState((s) => ({ pageSize: Number(s.pageSize) - 1 })); | ||
| }} | ||
| style={{ margin: '0 8px' }} | ||
| > | ||
| - | ||
| </button> | ||
| <button | ||
| onClick={() => { | ||
| setState({ pageSize: 10 }); | ||
| }} | ||
| > | ||
| reset | ||
| </button> | ||
| </span> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| const commonConfig = require('../../gulpfile'); | ||
|
|
||
| exports.default = commonConfig.default; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| --- | ||
| title: useUrlState | ||
| nav: | ||
| title: Hooks | ||
| path: /hooks | ||
| group: | ||
| title: State | ||
| path: /state | ||
| --- | ||
|
|
||
| # useUrlState | ||
|
|
||
| A hook that stores the state into url query parameters. | ||
|
|
||
| ## Install | ||
|
|
||
| ```bash | ||
| npm i @ahooksjs/use-url-state -S | ||
| ``` | ||
|
|
||
| > This hook relies on useLocation & useHistory from `react-router`, to use this hook, you need to ensure | ||
| > | ||
| > 1\. Your project is using `react-router` version 5.0 or higher to manage routing | ||
| > | ||
| > 2\. Installed @ahooksjs/use-url-state | ||
|
|
||
| ## Usage | ||
|
|
||
| ```js | ||
| import useUrlState from '@ahooksjs/use-url-state'; | ||
| ``` | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Default usage | ||
|
|
||
| <code src="./demo/demo1.tsx" /> | ||
|
|
||
| ### Multi-state management | ||
|
|
||
| <code src="./demo/demo2.tsx" /> | ||
|
|
||
| ## API | ||
|
|
||
| ```typescript | ||
| 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' | 'replace' | | ||
|
|
||
| ### Result | ||
|
|
||
| | Property | Description | Type | | ||
| |----------|------------------------------------------|------------| | ||
| | state | url query object | object | | ||
| | setState | same as useState, but state should be object | (state: S) => void \| (() => ((state: S) => S)) | |
Oops, something went wrong.