Merge pull request #28 from asmyshlyaev177/fix_setUrl_options_def

fix: fix `setUrl` options as second argument
asmyshlyaev177 · Nov 14, 2024 · 35c4522 · 35c4522
2 parents 518e7bb + 2347850
commit 35c4522
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 9 deletions.
diff --git a/packages/example-nextjs14/src/app/Form-for-test.tsx b/packages/example-nextjs14/src/app/Form-for-test.tsx
@@ -45,6 +45,8 @@ export const Form = ({
       setState((st) => ({ ...st, age: 18 }));
       setUrl(urlState);
       setUrl((st) => ({ ...st, age: 18 }));
+      setUrl(urlState, { replace: true });
+      setUrl((st) => ({ ...st, age: 18 }), { replace: true });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

diff --git a/packages/example-nextjs15/src/app/Form-for-test.tsx b/packages/example-nextjs15/src/app/Form-for-test.tsx
@@ -43,6 +43,8 @@ export const Form = ({
       setState((st) => ({ ...st, age: 18 }));
       setUrl(urlState);
       setUrl((st) => ({ ...st, age: 18 }));
+      setUrl(urlState, { replace: true });
+      setUrl((st) => ({ ...st, age: 18 }), { replace: true });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

diff --git a/packages/example-react-router6/src/Form-for-test.tsx b/packages/example-react-router6/src/Form-for-test.tsx
@@ -35,6 +35,8 @@ export const Form = ({ className }: { className?: string }) => {
       setState((st) => ({ ...st, age: 18 }));
       setUrl(urlState);
       setUrl((st) => ({ ...st, age: 18 }));
+      setUrl(urlState, { replace: true });
+      setUrl((st) => ({ ...st, age: 18 }), { replace: true });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

diff --git a/packages/urlstate/next/useUrlState/useUrlState.ts b/packages/urlstate/next/useUrlState/useUrlState.ts
@@ -37,9 +37,12 @@ export function useUrlState<T extends JSONCompatible>({
  * NextJS hook. Returns `urlState`, `setState`, and `setUrl` functions
  *
  * @param {JSONCompatible<T>} [defaultState] Fallback (default) values for state
- * @param {Object} params - Object with other parameters
- * @param {?SearchParams<T>} params.searchParams searchParams from Next server component
+ * @param {Object} params - Object with other parameters, including params from App router
+ * @param {boolean} params.replace replace URL of push, default `true`
  * @param {boolean} params.useHistory use window.history for navigation, default true, no _rsc requests https://github.com/vercel/next.js/discussions/59167
+ * @param {?SearchParams<T>} params.searchParams searchParams from Next server component
+ * @param {boolean} params.scroll reset scroll, default `false`
+
  *
  * * Example:
  * ```ts
@@ -49,9 +52,7 @@ export function useUrlState<T extends JSONCompatible>({
  * const { urlState, setState, setUrl } = useUrlState(form, { searchParams });
  *
  * setState({ name: 'test' });
- * // by default it's uses router.push with scroll: false
  * setUrl({ name: 'test' }, { replace: true, scroll: true });
- * // similar to React.useState
  * setUrl(curr => ({ ...curr, name: 'test' }), { replace: true, scroll: true });
  *  ```
  *
@@ -63,7 +64,10 @@ export function useUrlState<T extends JSONCompatible>(
 ): {
   urlState: T;
   setState: (value: Partial<T> | ((currState: T) => T)) => void;
-  setUrl: (value?: Partial<T> | ((currState: T) => T)) => void;
+  setUrl: (
+    value?: Partial<T> | ((currState: T) => T),
+    options?: Options,
+  ) => void;
 };
 
 export function useUrlState<T extends JSONCompatible>(

diff --git a/packages/urlstate/react-router/useUrlState/useUrlState.ts b/packages/urlstate/react-router/useUrlState/useUrlState.ts
@@ -41,7 +41,9 @@ export function useUrlState<T extends JSONCompatible>({
  * @param {JSONCompatible<T>} [defaultState] Fallback (default) values for state
  * @param {Object} params - Object with other parameters
  * @param {NavigateOptions} params.NavigateOptions See type from `react-router-dom`
- * @param {boolean} params.useHistory use window.history for navigation
+ * @param {boolean} params.replace replace URL of push, default `true`
+ * @param {boolean} params.useHistory use window.history for navigation, default `false`
+ * @param {boolean} params.preventScrollReset keep scroll position, default `true`
  * * Example:
  * ```ts
  * export const form = { name: '', age: 0 };
@@ -61,7 +63,10 @@ export function useUrlState<T extends JSONCompatible>(
 ): {
   urlState: T;
   setState: (value: Partial<T> | ((currState: T) => T)) => void;
-  setUrl: (value?: Partial<T> | ((currState: T) => T)) => void;
+  setUrl: (
+    value?: Partial<T> | ((currState: T) => T),
+    options?: Params,
+  ) => void;
 };
 
 export function useUrlState<T extends JSONCompatible>(
@@ -140,7 +145,7 @@ export function useUrlState<T extends JSONCompatible>(
      * // or
      * setState(curr => ({ ...curr, name: 'test' }) );
      * // can pass optional React-Router `NavigateOptions`
-     * setState(curr => ({ ...curr, name: 'test', preventScrollReset: false }) );
+     * setState(curr => ({ ...curr, name: 'test' }) );
      *  ```
      *
      *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/react-router/useUrlState#updatestate}
@@ -157,7 +162,7 @@ export function useUrlState<T extends JSONCompatible>(
      * // or
      * setUrl(curr => ({ ...curr, name: 'test' }), { replace: true } );
      * // can pass optional React-Router `NavigateOptions`
-     * setState(curr => ({ ...curr, name: 'test', preventScrollReset: false }) );
+     * setUrl(curr => ({ ...curr, name: 'test' }), { preventScrollReset: false } );
      *  ```
      *
      *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/react-router/useUrlState#updateurl}