Merge pull request #58 from Arthurgallina1/useQueryParams

Add useQueryParams hook

Author: craig1123

README.md

@@ -53,6 +53,7 @@ yarn add react-recipes
 | 🥒 [`useOnlineStatus`](./docs/useOnlineStatus.md)           | onlineStatus                                                  | -                                                                                       |
 | 🍿 [`usePrevious`](./docs/usePrevious.md)                   | previous                                                      | (value)                                                                                 |
 | 🖨 [`usePrint`](./docs/usePrint.md)                          | { ref, handlePrint }                                          | (style = {})                                                                            |
+| :question: [`useQueryParams`](./docs/useQueryParams.md)     | { getParams, setParams }                                      | -                                                                                       |
 | 🍣 [`useScript`](./docs/useScript.md)                       | [loaded, error]                                               | (src)                                                                                   |
 | 🍖 [`useSpeechRecognition`](./docs/useSpeechRecognition.md) | { supported, listen, listening, stop }                        | ({ onEnd, onResult, onError })                                                          |
 | 🍗 [`useSpeechSynthesis`](./docs/useSpeechSynthesis.md)     | { supported, speak, speaking, cancel, voices, pause, resume } | ({ onEnd, onResult, onError, onBoundary, onPause, onResume })                           |

__tests__/useQueryParams.test.js

@@ -0,0 +1,37 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import useQueryParams from '../src/useQueryParams';
+
+describe('useQueryParams', () => {
+  it('sets query params correctly', () => {
+    const newParams = { page: '1', order: 'ASC' };
+    const { result } = renderHook(() => useQueryParams());
+
+    act(() => {
+      result.current.setParams(newParams);
+    });
+    const params = result.current.getParams();
+    expect(params).toStrictEqual(newParams);
+  });
+
+  it('clears query params', () => {
+    const { result } = renderHook(() => useQueryParams());
+
+    act(() => {
+      result.current.setParams();
+    });
+    const params = result.current.getParams();
+    expect(params).toStrictEqual({});
+  });
+
+  it('read query params correctly', () => {
+    delete window.location;
+    window.location = new URL('https://test.com/testing?param1=test&testing=true');
+
+    const { result } = renderHook(() => useQueryParams());
+    let params;
+    act(() => {
+      params = result.current.getParams();
+    });
+    expect(params).toStrictEqual({ param1: 'test', testing: 'true' });
+  });
+});

docs/useQueryParams.md

@@ -0,0 +1,39 @@
+# 📍 `useQueryParams`
+
+Gets and sets query params
+
+## Usage
+
+```js
+import { useQueryParams } from 'react-recipes';
+
+function App() {
+  const { getParams, setParams } = useQueryParams();
+
+  const params = getParams();
+
+  return (
+    <div>
+      <button
+        onClick={() => {
+          setParams({ page: 1, order: 'ASC' });
+        }}
+      >
+        Set Params
+      </button>
+      <button
+        onClick={() => {
+          setParams({});
+        }}
+      >
+        Clear params
+      </button>
+      {Object.entries(params).map(([paramKey, paramValue]) => (
+        <p>
+          {paramKey}: {paramValue}
+        </p>
+      ))}
+    </div>
+  );
+}
+```

src/index.js

@@ -23,6 +23,7 @@ export { default as useOnClickOutside } from './useOnClickOutside';
 export { default as useOnlineStatus } from './useOnlineStatus';
 export { default as usePrevious } from './usePrevious';
 export { default as usePrint } from './usePrint';
+export { default as useQueryParams } from './useQueryParams';
 export { default as useScript } from './useScript';
 export { default as useSpeechRecognition } from './useSpeechRecognition';
 export { default as useSpeechSynthesis } from './useSpeechSynthesis';

src/useQueryParams.js

@@ -0,0 +1,53 @@
+import useLocation from './useLocation';
+
+export default function useQueryParams() {
+  const {
+    replace, search,
+  } = useLocation();
+
+  const getParams = () => {
+    const urlSearchParams = new URLSearchParams(search);
+    const params = Object.fromEntries(urlSearchParams.entries());
+    return params;
+  };
+
+  const setParams = (params) => {
+    const stringfiedUrlSearchParams = new URLSearchParams(params).toString();
+    replace(`?${stringfiedUrlSearchParams}`);
+  };
+
+  return {
+    getParams, setParams,
+  };
+}
+
+// Usage
+
+// function App() {
+//   const { getParams, setParams } = useQueryParams();
+//   const params = getParams();
+//
+//   return (
+//     <div>
+//       <button
+//         onClick={() => {
+//           setParams({ page: 1, order: 'ASC' });
+//         }}
+//       >
+//         Set Params
+//       </button>
+//       <button
+//         onClick={() => {
+//           setParams({});
+//         }}
+//       >
+//         Clear params
+//       </button>
+//       {Object.entries(params).map(([paramKey, paramValue]) => (
+//         <p>
+//           {paramKey}: {paramValue}
+//         </p>
+//       ))}
+//     </div>
+//   );
+// }