diff --git a/README.md b/README.md index 8b26273..6785254 100644 --- a/README.md +++ b/README.md @@ -104,4 +104,5 @@ Open `http://localhost:3000` to view documents about hooks. | useSearchParamAll | Get a single search param as array | | useUpdateSearchParams | Get a function to update search params | | useSearchParamState | Wrap a single search param into a react state | +| useSearchParamArray | Get an array of search param | | useWebSocket | Create a web socket connecting to specified url | diff --git a/packages/router/docs/useSearchParamsArray.md b/packages/router/docs/useSearchParamsArray.md new file mode 100644 index 0000000..a82e93b --- /dev/null +++ b/packages/router/docs/useSearchParamsArray.md @@ -0,0 +1,28 @@ +--- +title: useSearchParamArray +nav: +title: Hooks +path: /hook +group: +title: Router +path: /router +order: 8 +--- + +# useSearchParamArray +Like `useSearchParam` but get an array of params you need. + +```typescript +function useSearchParamArray(keys: Array): Array +``` +e.g. +```typescript +import {useSearchParamArray} from '@huse/router'; + +// query: /test?x=1&y=2 +const test = () => { + const [x, y, z] = useSearchParamArray(['x','y']); + // 1 2 null + console.log(x, y, z); +}; +``` \ No newline at end of file diff --git a/packages/router/src/__tests__/search.test.js b/packages/router/src/__tests__/search.test.js index c35cac7..4bec30c 100644 --- a/packages/router/src/__tests__/search.test.js +++ b/packages/router/src/__tests__/search.test.js @@ -7,6 +7,7 @@ import { useSearchParamAll, useUpdateSearchParams, useSearchParamState, + useSearchParamArray, } from '../search'; const wrapper = historyOrURL => { @@ -155,3 +156,20 @@ describe('useSearchParamState', () => { expect(result.current[0]).toBe('2'); }); }); + +describe('useSearchParamArray', () => { + test('single value', () => { + const {result} = renderHook(() => useSearchParamArray('x'), {wrapper: wrapper('/foo?x=1')}); + expect(result.current).toEqual(['1']); + }); + + test('multiple values', () => { + const {result} = renderHook(() => useSearchParamArray(['x','y']), {wrapper: wrapper('/foo?x=1&y=2')}); + expect(result.current).toEqual(['1', '2']); + }); + + test('no value', () => { + const {result} = renderHook(() => useSearchParamArray(['y']), {wrapper: wrapper('/foo?x=1')}); + expect(result.current).toEqual([null]); + }); +}); diff --git a/packages/router/src/search.ts b/packages/router/src/search.ts index ce49900..1be9ea2 100644 --- a/packages/router/src/search.ts +++ b/packages/router/src/search.ts @@ -89,3 +89,12 @@ export function useSearchParamState(key: string, options: NavigateOptions = {}): return [value, setValue]; } + +export function useSearchParamArray(keys: Array): Array { + const result: Array = []; + const [params] = useSearchParams(); + for(const key of keys){ + result.push(params.get(key)); + } + return result; +} \ No newline at end of file