state-in-url 6.2.4 → 6.4.0

package/{README.KO.md → README.ko.md}

@@ -1,4 +1,7 @@
-[English](./README.md) | 한국어 | [简体中文](./README.CN.md)
+<!-- i18n:start -->
+[English](./README.md) · [简体中文](./README.zh-CN.md) · [日本語](./README.ja.md) · 한국어 · [Русский](./README.ru.md) · [Español](./README.es.md) · [Português (BR)](./README.pt-BR.md) · [Français](./README.fr.md) · [Tiếng Việt](./README.vi.md)
+<!-- i18n:meta locale=ko source=README.md source-blob=bbf45a10aae9e88f68b27d84f51ee3e7e8a1e436 status=translated -->
+<!-- i18n:end -->
 
 <div align="center">
   <img src="/packages/example-nextjs14/public/Logo_symbol.png" alt="state-in-url 로고" width="120px" />
@@ -11,6 +14,8 @@
 
 <div align="center">
 
+[![Available for hire](https://img.shields.io/badge/available%20for%20hire-senior%20react%20engineer-2ea44f?style=flat-square)](https://asmyshlyaev177.dev)
+
 [![npm](https://img.shields.io/npm/v/state-in-url.svg)](https://www.npmjs.com/package/state-in-url)
 ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/state-in-url.svg)
 [![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)
@@ -23,6 +28,8 @@
 [![OpenSSF Scorecard](https://api.scorecard.dev/projects/github.com/asmyshlyaev177/state-in-url/badge)](https://scorecard.dev/viewer/?uri=github.com/asmyshlyaev177/state-in-url)
 [![OpenSSF Best Practices](https://www.bestpractices.dev/projects/9679/badge)](https://www.bestpractices.dev/projects/9679)
 [![license](https://img.shields.io/github/license/asmyshlyaev177/state-in-url.svg?style=flat-square)](https://github.com/asmyshlyaev177/state-in-url/blob/master/LICENSE)
+<!-- or by embedding this in your HTML:
+<a href="https://www.bestpractices.dev/projects/9679"><img src="https://www.bestpractices.dev/projects/9679/badge"></a>  -->
 
 </div>
 
@@ -97,6 +104,8 @@ Next.js와 react-router용 `useUrlState` 훅과 그 외 JS 환경을 위한 헬
 
 ## 목차
 
+<!-- toc:start -->
+
 - [State in url](#state-in-url)
 - [데모](#데모)
   - [왜 `state-in-url`을 사용해야 하나요?](#왜-state-in-url을-사용해야-하나요)
@@ -106,6 +115,7 @@ Next.js와 react-router용 `useUrlState` 훅과 그 외 JS 환경을 위한 헬
   - [설치](#설치)
     - [1. 패키지 설치](#1-패키지-설치)
     - [2. tsconfig.json 수정](#2-tsconfigjson-수정)
+  - [AI 코딩 에이전트와 함께 사용](#ai-코딩-에이전트와-함께-사용)
   - [useUrlState](#useurlstate)
     - [Next.js용 useUrlState 훅](#nextjs용-useurlstate-훅)
       - [사용 예제](#사용-예제)
@@ -124,6 +134,7 @@ Next.js와 react-router용 `useUrlState` 훅과 그 외 JS 환경을 위한 헬
   - [기타 훅과 헬퍼](#기타-훅과-헬퍼)
     - [다른 라우터용 `useUrlStateBase` 훅](#다른-라우터용-useurlstatebase-훅)
     - [React.js용 `useSharedState` 훅](#reactjs용-usesharedstate-훅)
+    - [React.js용 `useLinkProps` 훅](#reactjs용-uselinkprops-훅)
     - [React.js용 `useUrlEncode` 훅](#reactjs용-useurlencode-훅)
     - [`encodeState` 및 `decodeState` 헬퍼](#encodestate-및-decodestate-헬퍼)
     - [`encode` 및 `decode` 헬퍼](#encode-및-decode-헬퍼)
@@ -136,9 +147,11 @@ Next.js와 react-router용 `useUrlState` 훅과 그 외 JS 환경을 위한 헬
   - [변경 로그](#변경-로그)
   - [언급](#언급)
   - [라이선스](#라이선스)
-  - [개인 웹사이트](#개인-웹사이트)
+  - [채용 문의](#채용-문의)
   - [영감](#영감)
 
+<!-- toc:end -->
+
 ## 설치
 
 ### 1. 패키지 설치
@@ -157,6 +170,16 @@ pnpm add state-in-url
 `tsconfig.json`의 `compilerOptions`에서 `"moduleResolution": "Bundler"`, 또는 `"moduleResolution": "Node16"`, 또는 `"moduleResolution": "NodeNext"`로 설정하세요.
 `"module": "ES2022"` 또는 `"module": "ESNext"` 설정이 필요할 수 있습니다.
 
+## AI 코딩 에이전트와 함께 사용
+
+`state-in-url`은 [@tanstack/intent](https://tanstack.com/intent/latest/docs/overview)용 스킬 파일을 함께 제공합니다. AI 에이전트(Claude Code, Cursor, Copilot, Codex 등)가 라이브러리를 사용할 때 올바른 패턴을 불러오고 흔한 실수를 피할 수 있습니다. `state-in-url`을 설치한 후 프로젝트에서 한 번 실행하세요:
+
+```sh
+npx @tanstack/intent@latest install
+```
+
+이렇게 하면 설치된 에이전트가 `node_modules/state-in-url/skills/`에서 스킬을 찾게 됩니다. 사용 가능한 스킬은 `npx @tanstack/intent@latest list`로 확인할 수 있습니다.
+
 ## useUrlState
 
 초기 상태를 매개변수로 받아 상태 객체, URL 업데이트 콜백, 상태만 업데이트하는 콜백을 반환하는 메인 훅입니다.
@@ -214,7 +237,7 @@ function MyComponent() {
       />
 
       <button onClick={() => setUrl((_, initial) => initial)}>
-        초기화
+        Reset
       </button>
 
     </div>
@@ -360,7 +383,7 @@ function TagsComponent() {
 
   return (
     <div>
-      <Field text="태그">
+      <Field text="Tags">
         <div className="flex flex-wrap gap-2">
           {tags.map((tag) => (
             <Tag
@@ -448,7 +471,7 @@ function TagsComponent() {
 
   return (
     <div>
-      <Field text="태그">
+      <Field text="Tags">
         <div className="flex flex-wrap gap-2">
           {tags.map((tag) => (
             <Tag
@@ -583,7 +606,7 @@ function TagsComponent() {
 
   return (
     <div>
-      <Field text="태그">
+      <Field text="Tags">
         <div className="flex flex-wrap gap-2">
           {tags.map((tag) => (
             <Tag
@@ -672,6 +695,29 @@ function SettingsComponent() {
 
 [API 문서](packages/urlstate/useSharedState/README.md)
 
+### React.js용 `useLinkProps` 훅
+
+다른 라우트를 가리키는 링크로 상태를 넘기는 훅입니다. 예를 들어 언어 전환기에 씁니다. `setUrl` 은 언제나 현재 경로에 쓰지만, 이 훅은 그렇지 않습니다.
+
+```tsx
+'use client'
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useLinkProps } from 'state-in-url/useLinkProps';
+
+export const form = { name: '' };
+
+function LanguagePicker() {
+  const linkProps = useLinkProps(form, useRouter().push);
+
+  return <Link {...linkProps('/de/pricing')}>Deutsch</Link>;
+}
+```
+
+마크업에는 원래의 `href` 가 남으므로 크롤러와 `hreflang` 은 정규 URL 을 봅니다. 상태는 클릭할 때 읽습니다.
+
+[API 문서](packages/urlstate/useLinkProps/README.ko.md)
+
 ### React.js용 `useUrlEncode` 훅
 
 [API 문서](packages/urlstate/useUrlEncode/README.md)
@@ -755,9 +801,24 @@ export const useUserState = () => {
 
 이 프로젝트는 [MIT 라이선스](LICENSE)에 따라 라이선스가 부여됩니다.
 
-## 개인 웹사이트
+## 채용 문의
+
+저는 **Aleksandr Smyshliaev**입니다. 이 라이브러리의 단독 작성자이자 유지보수자입니다.
+시니어 프론트엔드 엔지니어(React / Next.js / TypeScript, 8년 이상)이며, 현재 **풀타임 원격 근무를 찾고 있습니다**.
+
+이 라이브러리는 제가 잘하는 것을 간추린 것입니다. 지저분한 브라우저 프리미티브 위의 타입 안전 API, 의존성 없음, 여러 React 메이저 버전을 거친 Next.js, Remix, React Router 전반의 안정성입니다.
 
-[포트폴리오 사이트](https://asmyshlyaev177.dev)
+- **특기** — 리팩터링에도 살아남는 컴포넌트 라이브러리, 상태 관리, 테스트 스위트.
+- **다른 프로젝트** —
+  [react-horizontal-scrolling-menu](https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu)
+  (주간 약 84k 설치),
+  [test-proxy-recorder](https://github.com/asmyshlyaev177/test-proxy-recorder)
+  (Playwright용 record/replay),
+  [llm-queue](https://github.com/asmyshlyaev177/llm-queue).
+- **위치** — 조지아 트빌리시(GMT+4). CET와 완전히 겹칩니다. 계약 사업자로 등록되어 있어 B2B 계약에 employer-of-record 설정이 필요 없습니다.
+- **연락처** — [asmyshlyaev177.dev](https://asmyshlyaev177.dev) ·
+  [asmyshlyaev177@gmail.com](mailto:asmyshlyaev177@gmail.com) ·
+  [LinkedIn](https://linkedin.com/in/asmyshlyaev177) · Telegram @asmyshlyaev177
 
 ## 영감
 

package/README.md

@@ -1,4 +1,7 @@
-English | [한국어](./README.KO.md) | [简体中文](./README.CN.md)
+<!-- i18n:start -->
+English · [简体中文](./README.zh-CN.md) · [日本語](./README.ja.md) · [한국어](./README.ko.md) · [Русский](./README.ru.md) · [Español](./README.es.md) · [Português (BR)](./README.pt-BR.md) · [Français](./README.fr.md) · [Tiếng Việt](./README.vi.md)
+<!-- i18n:meta locale=en -->
+<!-- i18n:end -->
 
 <div align="center">
   <img src="/packages/example-nextjs14/public/Logo_symbol.png" alt="state-in-url logo" width="120px" />
@@ -101,6 +104,8 @@ This library is a good alternative for NUQS.
 
 ## Table of content
 
+<!-- toc:start -->
+
 - [State in url](#state-in-url)
 - [Demo](#demo)
   - [Why use `state-in-url`?](#why-use-state-in-url)
@@ -129,6 +134,7 @@ This library is a good alternative for NUQS.
   - [Other hooks and helpers](#other-hooks-and-helpers)
     - [`useUrlStateBase` hook for others routers](#useurlstatebase-hook-for-others-routers)
     - [`useSharedState` hook for React.js](#usesharedstate-hook-for-reactjs)
+    - [`useLinkProps` hook for React.js](#uselinkprops-hook-for-reactjs)
     - [`useUrlEncode` hook for React.js](#useurlencode-hook-for-reactjs)
     - [`encodeState` and `decodeState` helpers](#encodestate-and-decodestate-helpers)
     - [`encode` and `decode` helpers](#encode-and-decode-helpers)
@@ -137,13 +143,15 @@ This library is a good alternative for NUQS.
   - [Other](#other)
     - [Contribute and/or run locally](#contribute-andor-run-locally)
   - [Roadmap](#roadmap)
-  - [Contact \& Support](#contact--support)
+  - [Contact & Support](#contact--support)
   - [Changelog](#changelog)
   - [Mentions](#mentions)
   - [License](#license)
-  - [Personal website](#personal-website)
+  - [Hire me](#hire-me)
   - [Inspiration](#inspiration)
 
+<!-- toc:end -->
+
 ## installation
 
 ### 1. Install package
@@ -691,6 +699,29 @@ function SettingsComponent() {
 
 [API Docs](packages/urlstate/useSharedState/README.md)
 
+### `useLinkProps` hook for React.js
+
+Hook to carry the state to a link pointing at a different route, e.g. a language switcher. `setUrl` always writes to the current path; this doesn't.
+
+```tsx
+'use client'
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useLinkProps } from 'state-in-url/useLinkProps';
+
+export const form = { name: '' };
+
+function LanguagePicker() {
+  const linkProps = useLinkProps(form, useRouter().push);
+
+  return <Link {...linkProps('/de/pricing')}>Deutsch</Link>;
+}
+```
+
+The markup keeps the plain `href`, so crawlers and `hreflang` see the canonical URL; the state is read on click.
+
+[API Docs](packages/urlstate/useLinkProps/README.md)
+
 ### `useUrlEncode` hook for React.js
 
 [API Docs](packages/urlstate/useUrlEncode/README.md)