feat(router): add a more practical hook

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 |

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<string>): Array<string|null>
+```
+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);
+};
+```

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]);
+    });
+});

packages/router/src/search.ts

@@ -89,3 +89,12 @@ export function useSearchParamState(key: string, options: NavigateOptions = {}):
 
     return [value, setValue];
 }
+
+export function useSearchParamArray(keys: Array<string>): Array<string|null> {
+    const result: Array<string|null> = [];
+    const [params] = useSearchParams();
+    for(const key of keys){
+        result.push(params.get(key));
+    }
+    return result;
+}