state-in-url 3.0.6 → 3.0.7

package/README.CN.md

@@ -22,7 +22,7 @@
 
 ![演示-gif](https://github.com/asmyshlyaev177/state-in-url/assets/19854148/c9802601-4d42-4362-b3e4-37ff87c3b97f)
 
-<a href="https://state-in-url-asmyshlyaev177.vercel.app/" target="_blank">演示</a> |
+<a href="https://state-in-url.dev/" target="_blank">演示</a> |
 <a href="https://state-in-url.netlify.app/" target="_blank">DEMO2</a> |
 
 <hr />

package/README.KO.md

@@ -26,7 +26,7 @@
 ![데모-gif](https://github.com/asmyshlyaev177/state-in-url/assets/19854148/c9802601-4d42-4362-b3e4-37ff87c3b97f)
 
 
-<a href="https://state-in-url-asmyshlyaev177.vercel.app/" target="_blank">데모</a> |
+<a href="https://state-in-url.dev" target="_blank">데모</a> |
 <a href="https://state-in-url.netlify.app/" target="_blank">DEMO2</a> |
 
 

package/README.md

@@ -31,7 +31,7 @@ English | [한국어](./README.KO.md) | [简体中文](./README.CN.md)
 
 ![Demo-gif](https://github.com/asmyshlyaev177/state-in-url/blob/master/assets/Demo-gif.gif)
 
-<a href="https://state-in-url-asmyshlyaev177.vercel.app/" target="_blank">DEMO</a> |
+<a href="https://state-in-url.dev" target="_blank">DEMO</a> |
 <a href="https://state-in-url.netlify.app/" target="_blank">DEMO2</a>
 
 <hr />
@@ -119,6 +119,8 @@ Possibly need to set `"module": "ES2022"`, or `"module": "ESNext"`
 
 [Docs](packages/urlstate/next/useUrlState#api)
 
+[React-Router example](#useurlstate-hook-for-react-router)
+
 ### Usage examples
 
 #### Basic
@@ -177,6 +179,9 @@ function MyComponent() {
 
 #### With complex state shape
 
+<details>
+  <Summary>Example</Summary>
+  
 ```typescript
 export const form: Form = {
   name: '',
@@ -191,7 +196,6 @@ type Form = {
   'agree to terms': boolean;
   tags: { id: string; value: { text: string; time: Date } }[];
 };
-
 ```
 
 ```typescript
@@ -251,10 +255,16 @@ const tags = [
 ```
 
 [Demo page example code](https://github.com/asmyshlyaev177/state-in-url/blob/master/packages/example-nextjs14/src/app/Form.tsx)
+</details>
+
 
 #### Auto sync state
 
-```typescript
+<details>
+  <Summary>Example</Summary>
+
+  ```typescript
+  
   const timer = React.useRef(0 as unknown as NodeJS.Timeout);
   React.useEffect(() => {
     clearTimeout(timer.current);
@@ -275,8 +285,15 @@ Syncing state `onBlur` will be more aligned with real world usage.
 <input onBlur={() => updateUrl()} .../>
 ```
 
+</details>
+
+
+
 #### With server side rendering
 
+<details>
+  <Summary>Example</Summary>
+  
 ```typescript
 export default async function Home({ searchParams }: { searchParams: object }) {
   return (
@@ -295,9 +312,13 @@ const Form = ({ searchParams }: { searchParams: object }) => {
 }
 ```
 
+</details>
+
 #### Using hook in `layout` component
 
-That a tricky part, since nextjs with app router doesn't allow to access searchParams from server side. There is workaround with using middleware, but it isn't pretty and can stop working after nextjs update.
+<details>
+  <Summary>Example</Summary>
+  That a tricky part, since nextjs with app router doesn't allow to access searchParams from server side. There is workaround with using middleware, but it isn't pretty and can stop working after nextjs update.
 
 ```typescript
 // add to appropriate `layout.tsc`
@@ -341,9 +362,13 @@ export default async function Layout({
 
 
 ```
+</details>
 
 #### With arbitrary state shape (not recommended)
 
+<details>
+  <Summary>Example</Summary>
+
 ```typescript
 'use client'
 import { useUrlState } from 'state-in-url/next';
@@ -354,6 +379,9 @@ function SettingsComponent() {
   const { state, updateUrl, updateState } = useUrlState<object>(someObj);
 }
 ```
+</details>
+
+
 
 ## useUrlState hook for React-Router
 
@@ -513,6 +541,8 @@ This project is licensed under the [MIT license](LICENSE).
 
 ## Inspiration
 
+[NUQS](https://github.com/47ng/nuqs)
+
 [Using URL to store state in Vue](https://dev.to/jacobandrewsky/using-url-to-store-state-in-vue-275c)
 
 [Storing state in the URL](https://antonz.org/storing-state/)

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "state-in-url",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "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-asmyshlyaev177.vercel.app",
+  "homepage": "https://state-in-url.dev",
   "keywords": [
     "front-end",
     "state-management",