state-in-url
GitHub (新しいタブで開きます)
言語: 日本語

型付きの状態、住む場所は URL

useUrlState は、自分自身をクエリ文字列に書き込む React の状態です。オブジェクト、配列、日付は型を保ち、あらゆる状態は共有可能なリンクになり、リロード後も維持されます。プロバイダーもボイラープレートも不要。

  • ~2 KB gzip 圧縮
  • 依存関係ゼロ
  • TypeScript ファースト
  • Next.js / react-router / Remix
  • MIT
npm i state-in-url

useUrlState — ライブで試す: react-router

下に入力してください。URL が点灯するのを見てください

1 つ目のクライアントコンポーネント
ソースコード
もう一方のクライアントコンポーネント

URL から読み取ります。props も context も不要で、型と構造は保持されます

{
name: string
age: undefinedundefined
agree_to_terms: falseboolean
tags: []
}
ソースコード

同じ API、3 つのルーター

クイックスタート

1. state を定義する
state
export const form: Form = {
  name: '',
  age: undefined,
  agree_to_terms: false,
  tags: [],
};

// use `Type` not `Interface`!
type Form = {
  name: string;
  age?: number;
  agree_to_terms: boolean;
  tags: { id: string; value: { text: string; time: Date } }[];
};
2. 任意のコンポーネントで使う
ComponentA
import { useUrlState } from 'state-in-url/react-router';
// for react-router v6
// import { useUrlState } from 'state-in-url/react-router6';
import { form } from './form';

export const ComponentA = () => {
  // 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);

  return <>
    <input
      id="name"
      value={urlState.name} 
      onChange={(ev) => setUrl({ name: ev.target.value })}
      />
    // OR can update state immediately but sync change to url as needed
    <input
      value={urlState.name}
      onChange={(ev) => { setState(curr => ({ ...curr, name: ev.target.value })) }}
      onBlur={() => setUrl()}
    />
    <button onClick={() => setUrl((curr, initial) => initial)}>
      Reset
    </button>
    </>
};
ComponentB
import { useUrlState } from 'state-in-url/react-router';
import { form } from './form';

export const ComponentB = () => {
  const { urlState } = useUrlState(form);

// will be defaultValue from `form` if not in url, no need to check

  return <div>name: {urlState.name}</div>
};
3. state の一部を扱う再利用可能なフックを作る
useFormState - custom hook
import React from 'react';
import { useUrlState } from 'state-in-url/react-router';

const form: Form={
  name: '',
  age: undefined,
  agree_to_terms: false,
  tags: [],
};

type Form = {
  name: string;
  age?: number;
  agree_to_terms: boolean;
  tags: {id: string; value: {text: string; time: Date } }[];
};

export const useFormState = () => {
  const { urlState, setUrl: setUrlBase, reset } = useUrlState(form);

  // first navigation will push new history entry
  // all following will just replace that entry
  // this way will have history with only 2 entries - ['/url', '/url?key=param']

  const replace = React.useRef(false);
  const setUrl = React.useCallback((
      state: Parameters<typeof setUrlBase>[0],
      opts?: Parameters<typeof setUrlBase>[1]
    ) => {
      setUrlBase(state, { replace: replace.current, ...opts });
      replace.current = true;
  }, [setUrlBase]);

  return { urlState, setUrl, resetUrl: reset };
};

なぜ state-in-url なのか?

URL 状態ライブラリは存在しますが、多くはセットアップが面倒だったり、保存できるものが限られていたりします。 state-in-url は「ただ動く」ことを目指しています。 React.useState を映す API で、URL をストアにします。

ボイラープレートなしで状態を保存し、ディープリンクを構築し、関連のないクライアントコンポーネント間でデータを共有できます。プロバイダーは不要です。構造と型は端から端まで保持されます。 Date が入り、 Date が出ます。

テストファーストで構築されており、ユニットテストとクロスブラウザの e2e スイートがすべてのコミットで実行されます。

Next.js: Suspense 境界は不要

このフックは useSearchParams を呼び出しません。そのため、このフックを使うコンポーネントは Suspense でラップする必要がなく、ページがプリレンダリングから除外されることもありません。PPR と cacheComponents も含みます。URL を直接読み取り、その後の変更をすべて追跡します。たとえば、 history.pushState を、その存在を知らないコードから呼ばれた場合も追跡します。

Next.js や react-router を使っていませんか?

この encodeState / decodeState ヘルパーは、どのフレームワークでもピュア JS でも動きます。フックはその上に載せた便利レイヤーです。

ぜひ GitHub ページ をご覧ください。スターをいただけると励みになります。

他の開発者と共有

Uneed Embed Badge