state-in-url 4.0.0 → 4.0.1

package/README.md

@@ -146,7 +146,7 @@ import { userState } from './userState';
 function MyComponent() {
   // can pass `replace` arg, it's control will `setUrl` will use `rounter.push` or `router.replace`, default replace=true
   // can pass `searchParams` from server components
-  const { urlState, setUrl, setUrlState } = useUrlState({ defaultState: userState });
+  const { urlState, setUrl, setState } = useUrlState({ defaultState: userState });
 
   // won't let you to accidently mutate state directly, requires TS
   // urlState.name = 'John' // <- error
@@ -162,7 +162,7 @@ function MyComponent() {
 
       // same api as React.useState
       <input value={urlState.name}
-        onChange={(ev) => { setUrlState(curr => ({ ...curr, name: ev.target.value })) }}
+        onChange={(ev) => { setState(curr => ({ ...curr, name: ev.target.value })) }}
         // Can update state immediately but sync change to url as needed
         onBlur={() => setUrl()}
       />
@@ -185,14 +185,14 @@ function MyComponent() {
 export const form: Form = {
   name: '',
   age: undefined,
-  'agree to terms': false,
+  agree_to_terms: false,
   tags: [],
 };
 
 type Form = {
   name: string;
   age?: number;
-  'agree to terms': boolean;
+  agree_to_terms: boolean;
   tags: { id: string; value: { text: string; time: Date } }[];
 };
 ```
@@ -391,14 +391,14 @@ API is same as for Next.js version, except can pass options from [NavigateOption
 export const form: Form = {
   name: '',
   age: undefined,
-  'agree to terms': false,
+  agree_to_terms: false,
   tags: [],
 };
 
 type Form = {
   name: string;
   age?: number;
-  'agree to terms': boolean;
+  agree_to_terms: boolean;
   tags: { id: string; value: { text: string; time: Date } }[];
 };
 
@@ -410,7 +410,7 @@ import { useUrlState } from 'state-in-url/react-router';
 import { form } from './form';
 
 function TagsComponent() {
-  const { urlState, setUrl, setUrlState } = useUrlState({ defaultState: form });
+  const { urlState, setUrl, setState } = useUrlState({ defaultState: form });
 
   const onChangeTags = React.useCallback(
     (tag: (typeof tags)[number]) => {
@@ -440,7 +440,7 @@ function TagsComponent() {
       </Field>
 
       <input value={urlState.name}
-        onChange={(ev) => { setUrlState(curr => ({ ...curr, name: ev.target.value })) }}
+        onChange={(ev) => { setState(curr => ({ ...curr, name: ev.target.value })) }}
         // Can update state immediately but sync change to url as needed
         onBlur={() => setUrl()}
       />

package/dist/react-router/useUrlState/useUrlState.d.ts

@@ -26,11 +26,11 @@ export declare function useUrlState<T extends JSONCompatible>({ defaultState, us
     /**
      * * Example:
      * ```ts
-     * setUrlState({ name: 'test' });
+     * setState({ name: 'test' });
      * // or
-     * setUrlState(curr => ({ ...curr, name: 'test' }) );
+     * setState(curr => ({ ...curr, name: 'test' }) );
      * // can pass optional React-Router `NavigateOptions`
-     * setUrlState(curr => ({ ...curr, name: 'test', preventScrollReset: false }) );
+     * setState(curr => ({ ...curr, name: 'test', preventScrollReset: false }) );
      *  ```
      *
      *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/react-router/useUrlState#updatestate}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "state-in-url",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Easily share complex state objects between unrelated React components, preserve types and structure, with TS validation. Deep links and url state synchronization wthout any hasssle or boilerplate.",
   "homepage": "https://state-in-url.dev",
   "keywords": [