Skip to content

Commit 5a45407

Browse files
docs: comparison on landing
1 parent de5992a commit 5a45407

45 files changed

Lines changed: 2680 additions & 311 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

README.es.md

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- i18n:start -->
22
[English](./README.md) · [简体中文](./README.zh-CN.md) · [日本語](./README.ja.md) · [한국어](./README.ko.md) · [Русский](./README.ru.md) · Español · [Português (BR)](./README.pt-BR.md) · [Français](./README.fr.md) · [Tiếng Việt](./README.vi.md)
3-
<!-- i18n:meta locale=es source=README.md source-blob=bbf45a10aae9e88f68b27d84f51ee3e7e8a1e436 status=translated -->
3+
<!-- i18n:meta locale=es source=README.md source-blob=065a903cd2cf7bc001b9e40ed8e0ad01c79f17d9 status=translated -->
44
<!-- i18n:end -->
55

66
<div align="center">
@@ -102,6 +102,28 @@ Esta biblioteca es una buena alternativa a NUQS.
102102
- **Bien probada**: [Pruebas unitarias y pruebas de Playwright para Chrome/Firefox/Safari](https://github.com/asmyshlyaev177/state-in-url/actions/workflows/tests.yml)
103103
- **Licencia permisiva**: MIT
104104

105+
### Comparación con nuqs
106+
107+
¿Buscas una alternativa a [nuqs](https://github.com/47ng/nuqs)? Ambas guardan estado tipado en la query string; difieren en cuánto hay que configurar y en qué puede ser un valor.
108+
109+
| Qué | `state-in-url` | `nuqs` |
110+
| --- | --- | --- |
111+
| Configuración | Ninguna — importa el hook y listo | Un componente adaptador envuelve la app |
112+
| Forma del estado | Un objeto tipado, como `React.useState` | Valores por clave, con un parser declarado para cada una |
113+
| Reutilización entre componentes | Envuelve el hook una vez — cada componente comparte el estado, sin props | Extraes tu propio hook alrededor del mapa de parsers |
114+
| Objetos y arrays anidados | Integrado — estructura y tipos se conservan | Parser JSON más tu propio validador |
115+
| Fechas | Se conservan automáticamente | Parser integrado, declarado por clave |
116+
| Tamaño, import completo | ~2,9 KB gzip | ~6,7 KB gzip |
117+
| Dependencias en runtime | Ninguna | Una |
118+
| Routers | Next.js, React Router v6/v7, Remix, helpers para JS puro | Next.js, React Router, Remix, TanStack Router, React puro |
119+
120+
Tamaños: import de toda la librería, esbuild minify + gzip, medido en agosto de 2026 contra nuqs 2.10.1.
121+
122+
nuqs es una buena librería: elígela si quieres cada valor como su propio query param legible o usas TanStack Router. Elige state-in-url cuando quieras un objeto tipado completo en la URL sin configuración.
123+
124+
125+
La comparación completa — la misma feature en ambas, otras alternativas (TanStack Router, use-query-params) y notas de migración — está en <https://state-in-url.dev/vs/nuqs>.
126+
105127
## Tabla de contenido
106128

107129
<!-- toc:start -->
@@ -111,6 +133,7 @@ Esta biblioteca es una buena alternativa a NUQS.
111133
- [¿Por qué usar `state-in-url`?](#por-qué-usar-state-in-url)
112134
- [Casos de uso](#casos-de-uso)
113135
- [Características](#características)
136+
- [Comparación con nuqs](#comparación-con-nuqs)
114137
- [Tabla de contenido](#tabla-de-contenido)
115138
- [Instalación](#instalación)
116139
- [1. Instalar el paquete](#1-instalar-el-paquete)

README.fr.md

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- i18n:start -->
22
[English](./README.md) · [简体中文](./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 · [Tiếng Việt](./README.vi.md)
3-
<!-- i18n:meta locale=fr source=README.md source-blob=bbf45a10aae9e88f68b27d84f51ee3e7e8a1e436 status=translated -->
3+
<!-- i18n:meta locale=fr source=README.md source-blob=065a903cd2cf7bc001b9e40ed8e0ad01c79f17d9 status=translated -->
44
<!-- i18n:end -->
55

66
<div align="center">
@@ -102,6 +102,28 @@ Cette bibliothèque est une bonne alternative à NUQS.
102102
- **Bien testée** : [Tests unitaires et tests Playwright pour Chrome/Firefox/Safari](https://github.com/asmyshlyaev177/state-in-url/actions/workflows/tests.yml)
103103
- **Licence permissive** : MIT
104104

105+
### Comparaison avec nuqs
106+
107+
Vous cherchez une alternative à [nuqs](https://github.com/47ng/nuqs) ? Les deux gardent un état typé dans la query string ; elles diffèrent par la configuration requise et par ce qu’une valeur peut être.
108+
109+
| Quoi | `state-in-url` | `nuqs` |
110+
| --- | --- | --- |
111+
| Mise en place | Aucune — importez le hook et c’est parti | Un composant adaptateur enveloppe l’application |
112+
| Forme de l’état | Un objet typé, comme `React.useState` | Valeurs par clé, un parseur déclaré pour chacune |
113+
| Réutilisation entre composants | Enveloppez le hook une fois — chaque composant partage l’état, sans props | Vous extrayez votre propre hook autour de la table de parseurs |
114+
| Objets et tableaux imbriqués | Intégré — structure et types préservés | Parseur JSON plus votre propre validateur |
115+
| Dates | Préservées automatiquement | Parseur intégré, déclaré par clé |
116+
| Taille, import complet | ~2,9 Ko gzip | ~6,7 Ko gzip |
117+
| Dépendances au runtime | Aucune | Une |
118+
| Routeurs | Next.js, React Router v6/v7, Remix, helpers pour JS pur | Next.js, React Router, Remix, TanStack Router, React pur |
119+
120+
Tailles : import de la bibliothèque entière, esbuild minify + gzip, mesuré en août 2026 face à nuqs 2.10.1.
121+
122+
nuqs est une bonne bibliothèque — choisissez-la pour un query param lisible par valeur, ou si vous êtes sur TanStack Router. Choisissez state-in-url pour un objet typé complet dans l’URL, sans configuration.
123+
124+
125+
La comparaison complète — la même fonctionnalité dans les deux, d’autres alternatives (TanStack Router, use-query-params) et des notes de migration — se trouve sur <https://state-in-url.dev/vs/nuqs>.
126+
105127
## Table des matières
106128

107129
<!-- toc:start -->
@@ -111,6 +133,7 @@ Cette bibliothèque est une bonne alternative à NUQS.
111133
- [Pourquoi utiliser `state-in-url` ?](#pourquoi-utiliser-state-in-url-)
112134
- [Cas d'utilisation](#cas-dutilisation)
113135
- [Fonctionnalités](#fonctionnalités)
136+
- [Comparaison avec nuqs](#comparaison-avec-nuqs)
114137
- [Table des matières](#table-des-matières)
115138
- [Installation](#installation)
116139
- [1. Installer le paquet](#1-installer-le-paquet)

README.ja.md

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- i18n:start -->
22
[English](./README.md) · [简体中文](./README.zh-CN.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)
3-
<!-- i18n:meta locale=ja source=README.md source-blob=bbf45a10aae9e88f68b27d84f51ee3e7e8a1e436 status=translated -->
3+
<!-- i18n:meta locale=ja source=README.md source-blob=065a903cd2cf7bc001b9e40ed8e0ad01c79f17d9 status=translated -->
44
<!-- i18n:end -->
55

66
<div align="center">
@@ -102,6 +102,28 @@ Next.js と react-router 用の `useUrlState` フックと、その他あらゆ
102102
- **十分にテスト済み**: [Chrome/Firefox/Safari 向けのユニットテストと Playwright テスト](https://github.com/asmyshlyaev177/state-in-url/actions/workflows/tests.yml)
103103
- **寛容なライセンス**: MIT
104104

105+
### nuqs との比較
106+
107+
[nuqs](https://github.com/47ng/nuqs) の代替をお探しですか?どちらも型付きの状態をクエリ文字列に保存しますが、必要な設定量と、値として扱えるものが異なります。
108+
109+
| 項目 | `state-in-url` | `nuqs` |
110+
| --- | --- | --- |
111+
| セットアップ | 不要 — hook を import するだけ | アダプターコンポーネントでアプリをラップ |
112+
| 状態の形 | `React.useState` のような型付きオブジェクト1つ | キーごとの値、それぞれにパーサーを宣言 |
113+
| コンポーネント間の再利用 | hook を一度包むだけ — 全コンポーネントが状態を共有、props 不要 | パーサー群を包む hook は自分で抽出 |
114+
| ネストしたオブジェクトと配列 | 標準対応 — 構造と型を保持 | JSON パーサーに加えて自前のバリデーターが必要 |
115+
| 日付 | 自動的に保持 | 組み込みパーサーをキーごとに宣言 |
116+
| サイズ(全体 import) | 約 2.9 KB gzip | 約 6.7 KB gzip |
117+
| ランタイム依存 | なし | 1つ |
118+
| ルーター | Next.js、React Router v6/v7、Remix、素の JS 用ヘルパー | Next.js、React Router、Remix、TanStack Router、素の React |
119+
120+
サイズはライブラリ全体の import を esbuild minify + gzip で計測(2026年8月、nuqs 2.10.1 と比較)。
121+
122+
nuqs も優れたライブラリです。値ごとに読みやすいクエリパラメータが欲しいとき、TanStack Router を使っているときは nuqs を。型付きオブジェクトを丸ごと URL に、設定ゼロで入れたいなら state-in-url を選んでください。
123+
124+
125+
完全版の比較 — 同じ機能の両実装、ほかの代替(TanStack Router、use-query-params)、移行メモ — は <https://state-in-url.dev/vs/nuqs> にあります。
126+
105127
## 目次
106128

107129
<!-- toc:start -->
@@ -111,6 +133,7 @@ Next.js と react-router 用の `useUrlState` フックと、その他あらゆ
111133
- [なぜ `state-in-url` を使うのか?](#なぜ-state-in-url-を使うのか)
112134
- [ユースケース](#ユースケース)
113135
- [特徴](#特徴)
136+
- [nuqs との比較](#nuqs-との比較)
114137
- [目次](#目次)
115138
- [インストール](#インストール)
116139
- [1. パッケージのインストール](#1-パッケージのインストール)

README.ko.md

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- i18n:start -->
22
[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)
3-
<!-- i18n:meta locale=ko source=README.md source-blob=bbf45a10aae9e88f68b27d84f51ee3e7e8a1e436 status=translated -->
3+
<!-- i18n:meta locale=ko source=README.md source-blob=065a903cd2cf7bc001b9e40ed8e0ad01c79f17d9 status=translated -->
44
<!-- i18n:end -->
55

66
<div align="center">
@@ -102,6 +102,28 @@ Next.js와 react-router용 `useUrlState` 훅과 그 외 JS 환경을 위한 헬
102102
- **충분한 테스트**: [Chrome/Firefox/Safari용 단위 테스트 및 Playwright 테스트](https://github.com/asmyshlyaev177/state-in-url/actions/workflows/tests.yml)
103103
- **자유로운 라이선스**: MIT
104104

105+
### nuqs와 비교
106+
107+
[nuqs](https://github.com/47ng/nuqs) 대안을 찾고 계신가요? 둘 다 타입이 유지되는 상태를 쿼리 문자열에 저장하지만, 필요한 설정량과 값으로 담을 수 있는 것이 다릅니다.
108+
109+
| 항목 | `state-in-url` | `nuqs` |
110+
| --- | --- | --- |
111+
| 설정 | 불필요 — hook을 import하면 끝 | 어댑터 컴포넌트로 앱을 감싸야 함 |
112+
| 상태 형태 | `React.useState` 같은 타입 객체 하나 | 키별 값, 각 키마다 파서 선언 |
113+
| 컴포넌트 간 재사용 | hook을 한 번 감싸면 — 모든 컴포넌트가 상태 공유, props 불필요 | 파서 맵을 감싸는 hook은 직접 추출 |
114+
| 중첩 객체와 배열 | 기본 지원 — 구조와 타입 유지 | JSON 파서에 자체 런타임 검증 추가 필요 |
115+
| 날짜 | 자동으로 유지 | 내장 파서를 키마다 선언 |
116+
| 크기, 전체 import | 약 2.9 KB gzip | 약 6.7 KB gzip |
117+
| 런타임 의존성 | 없음 | 1개 |
118+
| 라우터 | Next.js, React Router v6/v7, Remix, 순수 JS 헬퍼 | Next.js, React Router, Remix, TanStack Router, 순수 React |
119+
120+
크기: 라이브러리 전체 import, esbuild minify + gzip, 2026년 8월 nuqs 2.10.1 기준 측정.
121+
122+
nuqs도 훌륭한 라이브러리입니다. 값마다 읽기 쉬운 쿼리 파라미터를 원하거나 TanStack Router를 쓴다면 nuqs를, 타입 객체 전체를 설정 없이 URL에 넣고 싶다면 state-in-url을 선택하세요.
123+
124+
125+
전체 비교 — 같은 기능의 두 구현, 다른 대안(TanStack Router, use-query-params), 마이그레이션 노트 — 는 <https://state-in-url.dev/vs/nuqs> 에 있습니다.
126+
105127
## 목차
106128

107129
<!-- toc:start -->
@@ -111,6 +133,7 @@ Next.js와 react-router용 `useUrlState` 훅과 그 외 JS 환경을 위한 헬
111133
- [`state-in-url`을 사용해야 하나요?](#왜-state-in-url을-사용해야-하나요)
112134
- [사용 사례](#사용-사례)
113135
- [특징](#특징)
136+
- [nuqs와 비교](#nuqs와-비교)
114137
- [목차](#목차)
115138
- [설치](#설치)
116139
- [1. 패키지 설치](#1-패키지-설치)

README.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,27 @@ This library is a good alternative for NUQS.
102102
- **Well tested**: [Unit tests and Playwright tests for Chrome/Firefox/Safari](https://github.com/asmyshlyaev177/state-in-url/actions/workflows/tests.yml)
103103
- **Permissive license**: MIT
104104

105+
### Comparison with nuqs
106+
107+
Searching for a [nuqs](https://github.com/47ng/nuqs) alternative? Both keep typed state in the query string; they differ in how much you set up and what a value can be.
108+
109+
| What | `state-in-url` | `nuqs` |
110+
| --- | --- | --- |
111+
| Setup | None — import the hook and go | Adapter component wraps the app |
112+
| State shape | One typed object, like `React.useState` | Per-key values, a parser declared for each |
113+
| Reuse across components | Wrap the hook once — every component shares the state, no props | Extract your own hook around the parser map |
114+
| Nested objects and arrays | Built in — structure and types preserved | JSON parser plus your own runtime validator |
115+
| Dates | Preserved automatically | Built-in parser, declared per key |
116+
| Size, full import | ~2.9 KB gzipped | ~6.7 KB gzipped |
117+
| Runtime dependencies | None | One |
118+
| Routers | Next.js, React Router v6/v7, Remix, plain JS helpers | Next.js, React Router, Remix, TanStack Router, plain React |
119+
120+
Sizes: whole-library import, esbuild minify + gzip, measured August 2026 against nuqs 2.10.1.
121+
122+
nuqs is a fine library — reach for it when you want each value as its own readable query param, or you are on TanStack Router. Reach for state-in-url when you want a whole typed object in the URL with zero setup.
123+
124+
The full comparison — the same feature built in both, other alternatives (TanStack Router, use-query-params) and migration notes — lives at <https://state-in-url.dev/vs/nuqs>.
125+
105126
## Table of content
106127

107128
<!-- toc:start -->
@@ -111,6 +132,7 @@ This library is a good alternative for NUQS.
111132
- [Why use `state-in-url`?](#why-use-state-in-url)
112133
- [Use cases](#use-cases)
113134
- [Features](#features)
135+
- [Comparison with nuqs](#comparison-with-nuqs)
114136
- [Table of content](#table-of-content)
115137
- [installation](#installation)
116138
- [1. Install package](#1-install-package)

README.pt-BR.md

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- i18n:start -->
22
[English](./README.md) · [简体中文](./README.zh-CN.md) · [日本語](./README.ja.md) · [한국어](./README.ko.md) · [Русский](./README.ru.md) · [Español](./README.es.md) · Português (BR) · [Français](./README.fr.md) · [Tiếng Việt](./README.vi.md)
3-
<!-- i18n:meta locale=pt-BR source=README.md source-blob=bbf45a10aae9e88f68b27d84f51ee3e7e8a1e436 status=translated -->
3+
<!-- i18n:meta locale=pt-BR source=README.md source-blob=065a903cd2cf7bc001b9e40ed8e0ad01c79f17d9 status=translated -->
44
<!-- i18n:end -->
55

66
<div align="center">
@@ -102,6 +102,28 @@ Esta biblioteca é uma boa alternativa ao NUQS.
102102
- **Bem testada**: [Testes unitários e testes Playwright para Chrome/Firefox/Safari](https://github.com/asmyshlyaev177/state-in-url/actions/workflows/tests.yml)
103103
- **Licença permissiva**: MIT
104104

105+
### Comparação com o nuqs
106+
107+
Procurando uma alternativa ao [nuqs](https://github.com/47ng/nuqs)? Ambas guardam estado tipado na query string; diferem em quanta configuração exigem e no que um valor pode ser.
108+
109+
| O quê | `state-in-url` | `nuqs` |
110+
| --- | --- | --- |
111+
| Configuração | Nenhuma — importe o hook e pronto | Um componente adaptador envolve o app |
112+
| Formato do estado | Um objeto tipado, como `React.useState` | Valores por chave, com um parser declarado para cada uma |
113+
| Reuso entre componentes | Envolva o hook uma vez — cada componente compartilha o estado, sem props | Você extrai seu próprio hook em volta do mapa de parsers |
114+
| Objetos e arrays aninhados | Nativo — estrutura e tipos preservados | Parser JSON mais seu próprio validador |
115+
| Datas | Preservadas automaticamente | Parser embutido, declarado por chave |
116+
| Tamanho, import completo | ~2,9 KB gzip | ~6,7 KB gzip |
117+
| Dependências em runtime | Nenhuma | Uma |
118+
| Roteadores | Next.js, React Router v6/v7, Remix, helpers para JS puro | Next.js, React Router, Remix, TanStack Router, React puro |
119+
120+
Tamanhos: import da biblioteca inteira, esbuild minify + gzip, medido em agosto de 2026 contra o nuqs 2.10.1.
121+
122+
nuqs é uma boa biblioteca — prefira-o se quiser cada valor como seu próprio query param legível, ou se usa TanStack Router. Prefira state-in-url quando quiser um objeto tipado inteiro na URL sem configuração.
123+
124+
125+
A comparação completa — a mesma feature nas duas, outras alternativas (TanStack Router, use-query-params) e notas de migração — está em <https://state-in-url.dev/vs/nuqs>.
126+
105127
## Índice
106128

107129
<!-- toc:start -->
@@ -111,6 +133,7 @@ Esta biblioteca é uma boa alternativa ao NUQS.
111133
- [Por que usar `state-in-url`?](#por-que-usar-state-in-url)
112134
- [Casos de uso](#casos-de-uso)
113135
- [Recursos](#recursos)
136+
- [Comparação com o nuqs](#comparação-com-o-nuqs)
114137
- [Índice](#índice)
115138
- [Instalação](#instalação)
116139
- [1. Instalar o pacote](#1-instalar-o-pacote)

0 commit comments

Comments
 (0)