入力項目のタイプ

入力項目にはそれぞれタイプがあり、利用者が入力する欄の種類と、useInputsがコードに渡す値が決まります。空欄のままの入力項目は、どのタイプでもundefinedになります。

タイプ	利用者が入力するもの	コードが受け取る値
文字列	1行のテキスト	string
機密	入力中は伏せて表示されるテキスト	string
数値	数値	number
選択	用意した選択肢から1つ	string
複数選択	用意した選択肢からいくつでも	string[]
日付	日付（日付ピッカーで選択）	Date
タイムゾーン	タイムゾーン（リストから選択）	string（例："Europe/London"）
住所	住所（候補が表示されます）	string
アイコン	アイコン（アイコンピッカーで選択）	string：inputIconNameに渡して使います
配列	別のタイプの値のリスト	そのタイプの値の配列

文字列

都市名、株式の銘柄コード、検索語などの自由なテキストです。

機密

パスワードのように、入力中は伏せて表示されるテキストです。ウィジェットをインストールする人だけが知っている情報、たとえばその人自身のAPIキーや非公開のカレンダーのリンクを尋ねるときに使います。自分のキーを使う場合は、代わりに非公開入力項目を使ってください。

数値

表示する見出しの数などの数値です。

選択

通貨やニュースソースなど、自分で書いた選択肢の中から1つを選んでもらいます。選択肢は読む人にわかりやすく書き、ウィジェットの中でコードに変換しましょう。選択肢をわかりやすく書くを参照してください。

複数選択

用意した選択肢の中から、いくつでも選んでもらいます。選択肢にカンマは使えません。

日付

誕生日やイベントの日などの日付です。その日のUTC午前0時を表すDateとして渡されるので、同じ日付を得るにはtimeZone: "UTC"を指定して読み取ります。

DATE.toLocaleDateString(undefined, {
  timeZone: "UTC",
  day: "numeric",
  month: "long",
});

タイムゾーン

"Europe/London"のような、IANA名で表したタイムゾーンです。時刻をフォーマットするときにtimeZoneとして渡します。フレーム自体のタイムゾーンを使うなら、入力項目は必要ありません。useTimeZoneを使ってください。

住所

住所や場所です。入力中に候補が表示されます。useGeocodeで座標に変換できます。

アイコン

利用者が選んだアイコンです。値をinputIconNameに通してから、Iconで描画します。

import { Icon, inputIconName } from "~lib/icon";
import { useInputs } from "~lib/use-inputs";

export const Widget = () => {
  const { ICON } = useInputs();
  const name = inputIconName(ICON);

  return name ? <Icon name={name} size={64} /> : null;
};

配列

複数の株式銘柄コードのように、同じ項目のタイプの値を並べたリストです。項目のタイプには、配列と機密以外のどのタイプも使えます。選択か複数選択にした場合は、項目のオプションも設定してください。