Eingabetypen

Jede Eingabe hat einen Typ. Er bestimmt, welches Feld ausgefüllt wird und was useInputs Ihrem Code liefert. Jede leer gelassene Eingabe kommt als undefined an.

Typ	Ausgefüllt wird	Ihr Code bekommt
Zeichenfolge	Eine Textzeile	string
Vertraulich	Text, der beim Tippen verborgen wird	string
Zahl	Eine Zahl	number
Auswahl	Eine Option aus Ihrer Liste	string
Mehrfachauswahl	Beliebig viele Optionen aus Ihrer Liste	string[]
Datum	Ein Datum, über eine Datumsauswahl	Date
Zeitzone	Eine Zeitzone, aus einer Liste	string, etwa "Europe/London"
Adresse	Eine Adresse, mit Vorschlägen	string
Symbol	Ein Symbol, über eine Symbolauswahl	string: über inputIconName weitergeben
Array	Eine Liste von Werten eines anderen Typs	Ein Array mit Werten dieses Typs

Zeichenfolge

Freier Text, etwa ein Städtename, ein Börsenkürzel oder ein Suchbegriff.

Vertraulich

Text, der beim Tippen verborgen wird, wie ein Passwort. Fragen Sie damit etwas ab, das nur der Person gehört, die Ihr Widget installiert, etwa ihren eigenen API-Schlüssel oder einen privaten Kalenderlink. Für einen Schlüssel, der Ihnen gehört, verwenden Sie stattdessen eine Private Eingabe.

Zahl

Eine Zahl, etwa wie viele Schlagzeilen angezeigt werden.

Auswahl

Eine Option aus einer Liste, die Sie schreiben, etwa eine Währung oder eine Nachrichtenquelle. Formulieren Sie die Optionen so, dass Menschen sie lesen können, und wandeln Sie sie in Ihrem Widget in Codes um. Siehe Auswahloptionen lesbar machen.

Mehrfachauswahl

Beliebig viele Optionen aus Ihrer Liste. Optionen dürfen keine Kommas enthalten.

Datum

Ein Datum, etwa ein Geburtstag oder der Tag einer Veranstaltung. Es kommt als Date um Mitternacht UTC an diesem Tag an. Lesen Sie es deshalb mit timeZone: "UTC", um denselben Tag zurückzubekommen:

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

Zeitzone

Eine Zeitzone, mit ihrem IANA-Namen, etwa "Europe/London". Übergeben Sie sie als timeZone, wenn Sie eine Uhrzeit formatieren. Für die Zeitzone des Rahmens selbst brauchen Sie keine Eingabe: Verwenden Sie useTimeZone.

Adresse

Eine Adresse oder ein Ort, mit Vorschlägen beim Tippen. Mit useGeocode wandeln Sie sie in Koordinaten um.

Symbol

Ein Symbol, das ausgewählt wird. Zeichnen Sie es mit Icon und geben Sie den Wert dabei über inputIconName weiter:

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;
};

Array

Eine Liste von Werten, alle vom selben Elementtyp, etwa mehrere Börsenkürzel. Als Elementtyp ist jeder Typ möglich außer Array und Vertraulich. Ist er Auswahl oder Mehrfachauswahl, legen Sie auch seine Elementoptionen fest.