diff --git a/README.md b/README.md index 8eedd3cd..88e87d80 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,7 @@ English | [한국어](./README.KO.md) | [简体中文](./README.CN.md) [![npm](https://img.shields.io/npm/v/state-in-url.svg)](https://www.npmjs.com/package/state-in-url) ![Tests](https://github.com/asmyshlyaev177/state-in-url/actions/workflows/tests.yml/badge.svg?branch=master) [![Codacy Badge](https://app.codacy.com/project/badge/Grade/73be54068b7f41b0b74a252579ac09ec)](https://app.codacy.com/gh/asmyshlyaev177/state-in-url/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade) +[![Codacy Badge](https://app.codacy.com/project/badge/Coverage/73be54068b7f41b0b74a252579ac09ec)](https://app.codacy.com/gh/asmyshlyaev177/state-in-url/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_coverage) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](https://github.com/asmyshlyaev177/state-in-url/) [![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)]([https://github.com/semantic-release/semantic-release](https://github.com/asmyshlyaev177/state-in-url)) ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/state-in-url.svg) @@ -165,7 +166,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, setState } = useUrlState({ defaultState: userState }); + const { urlState, setUrl, setState } = useUrlState(userState); return (
@@ -221,7 +222,7 @@ import { form } from './form'; function TagsComponent() { // `urlState` will infer from Form type! - const { urlState, setUrl } = useUrlState({ defaultState: form }); + const { urlState, setUrl } = useUrlState(form); const onChangeTags = React.useCallback( (tag: (typeof tags)[number]) => { @@ -320,7 +321,7 @@ import { useUrlState } from 'state-in-url/next'; import { form } from './form'; const Form = ({ searchParams }: { searchParams: object }) => { - const { urlState, setState, setUrl } = useUrlState({ defaultState: form, searchParams }); + const { urlState, setState, setUrl } = useUrlState(form, { searchParams }); } ``` @@ -426,7 +427,7 @@ import { useUrlState } from 'state-in-url/react-router'; import { form } from './form'; function TagsComponent() { - const { urlState, setUrl, setState } = useUrlState({ defaultState: form }); + const { urlState, setUrl, setState } = useUrlState(form); const onChangeTags = React.useCallback( (tag: (typeof tags)[number]) => { @@ -540,7 +541,7 @@ const userState = { }; export const useUserState = () => { - const { urlState, setUrl } = useUrlState({ defaultState: userState }); + const { urlState, setUrl } = useUrlState(userState); return { userState: urlState, setUserState: setUrl };; } diff --git a/package-lock.json b/package-lock.json index c6e22604..2ca8b036 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "state-in-url", - "version": "4.0.4", + "version": "4.0.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "state-in-url", - "version": "4.0.4", + "version": "4.0.5", "license": "MIT", "workspaces": [ "packages/urlstate", @@ -33995,6 +33995,21 @@ "name": "state-in-url", "version": "1.0.0", "license": "ISC" + }, + "packages/example-nextjs15/node_modules/@next/swc-win32-ia32-msvc": { + "version": "14.2.16", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.16.tgz", + "integrity": "sha512-jhPl3nN0oKEshJBNDAo0etGMzv0j3q3VYorTSFqH1o3rwv1MQRdor27u1zhkgsHPNeY1jxcgyx1ZsCkDD1IHgg==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } } } } diff --git a/packages/example-nextjs14/src/app/(tests)/useUrlState/Comp1.tsx b/packages/example-nextjs14/src/app/(tests)/useUrlState/Comp1.tsx index c1584315..e3525357 100644 --- a/packages/example-nextjs14/src/app/(tests)/useUrlState/Comp1.tsx +++ b/packages/example-nextjs14/src/app/(tests)/useUrlState/Comp1.tsx @@ -5,8 +5,7 @@ import { useUrlState } from 'state-in-url/next'; import { stateShape } from './state'; export const Comp1 = ({ searchParams }: { searchParams?: object }) => { - const { state, updateUrl } = useUrlState({ - defaultState: stateShape, + const { urlState, setUrl } = useUrlState(stateShape, { searchParams, replace: false, }); @@ -15,9 +14,9 @@ export const Comp1 = ({ searchParams }: { searchParams?: object }) => {

Per page select

{ - const { urlState } = useUrlState({ defaultState: form, searchParams });// [!code highlight:1] + const { urlState } = useUrlState(form, { searchParams });// [!code highlight:1] // [!code word:urlState] return
name: {urlState.name}
diff --git a/packages/example-nextjs14/src/app/components/CodeBlocksRR.tsx b/packages/example-nextjs14/src/app/components/CodeBlocksRR.tsx index 6a4eb1c4..2c2247d0 100644 --- a/packages/example-nextjs14/src/app/components/CodeBlocksRR.tsx +++ b/packages/example-nextjs14/src/app/components/CodeBlocksRR.tsx @@ -1,5 +1,5 @@ import { File } from './File'; -import { CodeBlockForm } from './CodeBlockForm'; +import { CodeBlockState } from './CodeBlockState'; export const CodeBlocksRR = () => { return ( @@ -8,7 +8,7 @@ export const CodeBlocksRR = () => {
1. Define the state
- +
2. Use it in any components @@ -19,7 +19,8 @@ export const CodeBlocksRR = () => { import { form } from './form'; export const ComponentA = () => { - const { urlState, setUrl, setState } = useUrlState({ defaultState: form });// [!code highlight:1] + // see docs for all possible params https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/react-router/useUrlState + const { urlState, setUrl, setState } = useUrlState(form, { replace: true });// [!code highlight:1] return <> { import { form } from './form'; export const ComponentB = () => { - const { urlState } = useUrlState({ defaultState: form });// [!code highlight:1] + const { urlState } = useUrlState(form);// [!code highlight:1] // [!code word:urlState] return
name: {urlState.name}
diff --git a/packages/example-nextjs15/src/app/(tests)/useUrlState/Comp1.tsx b/packages/example-nextjs15/src/app/(tests)/useUrlState/Comp1.tsx index f73f8c9f..bb621bc5 100644 --- a/packages/example-nextjs15/src/app/(tests)/useUrlState/Comp1.tsx +++ b/packages/example-nextjs15/src/app/(tests)/useUrlState/Comp1.tsx @@ -5,8 +5,7 @@ import { useUrlState } from 'state-in-url/next'; import { stateShape } from './state'; export const Comp1 = ({ searchParams }: { searchParams?: object }) => { - const { state, updateUrl } = useUrlState({ - defaultState: stateShape, + const { urlState, setUrl } = useUrlState(stateShape, { searchParams, replace: false, }); @@ -15,9 +14,9 @@ export const Comp1 = ({ searchParams }: { searchParams?: object }) => {

Per page select