From 2347850a4d34bbcf418632b6e45dac3aeff6ceb2 Mon Sep 17 00:00:00 2001 From: asmyshlyaev177 Date: Thu, 14 Nov 2024 22:53:00 +0400 Subject: [PATCH] fix: fix `setUrl` options as second argument --- .../example-nextjs14/src/app/Form-for-test.tsx | 2 ++ .../example-nextjs15/src/app/Form-for-test.tsx | 2 ++ .../example-react-router6/src/Form-for-test.tsx | 2 ++ packages/urlstate/next/useUrlState/useUrlState.ts | 14 +++++++++----- .../react-router/useUrlState/useUrlState.ts | 13 +++++++++---- 5 files changed, 24 insertions(+), 9 deletions(-) diff --git a/packages/example-nextjs14/src/app/Form-for-test.tsx b/packages/example-nextjs14/src/app/Form-for-test.tsx index bd6d4b1..8eeb9b4 100644 --- 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 index 29cbee2..23a9229 100644 --- 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 index 2cd7c90..cbc620b 100644 --- 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 index b02e0df..dc52f95 100644 --- a/packages/urlstate/next/useUrlState/useUrlState.ts +++ b/packages/urlstate/next/useUrlState/useUrlState.ts @@ -37,9 +37,12 @@ export function useUrlState({ * NextJS hook. Returns `urlState`, `setState`, and `setUrl` functions * * @param {JSONCompatible} [defaultState] Fallback (default) values for state - * @param {Object} params - Object with other parameters - * @param {?SearchParams} 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} params.searchParams searchParams from Next server component + * @param {boolean} params.scroll reset scroll, default `false` + * * * Example: * ```ts @@ -49,9 +52,7 @@ export function useUrlState({ * 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( ): { urlState: T; setState: (value: Partial | ((currState: T) => T)) => void; - setUrl: (value?: Partial | ((currState: T) => T)) => void; + setUrl: ( + value?: Partial | ((currState: T) => T), + options?: Options, + ) => void; }; export function useUrlState( diff --git a/packages/urlstate/react-router/useUrlState/useUrlState.ts b/packages/urlstate/react-router/useUrlState/useUrlState.ts index c751971..bd44d24 100644 --- a/packages/urlstate/react-router/useUrlState/useUrlState.ts +++ b/packages/urlstate/react-router/useUrlState/useUrlState.ts @@ -41,7 +41,9 @@ export function useUrlState({ * @param {JSONCompatible} [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( ): { urlState: T; setState: (value: Partial | ((currState: T) => T)) => void; - setUrl: (value?: Partial | ((currState: T) => T)) => void; + setUrl: ( + value?: Partial | ((currState: T) => T), + options?: Params, + ) => void; }; export function useUrlState( @@ -140,7 +145,7 @@ export function useUrlState( * // 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( * // 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}