Tipi di input

Ogni input ha un tipo, che decide il campo che le persone compilano e ciò che useInputs passa al tuo codice. Un input lasciato vuoto arriva come undefined.

Tipo	Le persone inseriscono	Il tuo codice riceve
Stringa	Una riga di testo	string
Sensibile	Testo nascosto mentre viene digitato	string
Numero	Un numero	number
Selezione	Una scelta dal tuo elenco di opzioni	string
Selezione multipla	Un numero qualsiasi di scelte dal tuo elenco	string[]
Data	Una data, da un selettore di date	Date
Fuso orario	Un fuso orario, da un elenco	string, come "Europe/London"
Indirizzo	Un indirizzo, con suggerimenti	string
Icona	Un’icona, da un selettore di icone	string: convertilo con inputIconName
Array	Un elenco di valori di un altro tipo	Un array di valori di quel tipo

Stringa

Testo libero, come il nome di una città, il simbolo di un titolo azionario o un termine di ricerca.

Sensibile

Testo nascosto mentre viene digitato, come una password. Usalo per chiedere qualcosa di privato a chi installa il tuo widget, come la sua chiave API o il link a un calendario privato. Per una chiave tua, usa invece un input privato.

Numero

Un numero, come quanti titoli di notizie mostrare.

Selezione

Una scelta da un elenco di opzioni che scrivi tu, come una valuta o una fonte di notizie. Scrivi opzioni pensate per essere lette dalle persone, e trasformale in codici nel tuo widget. Vedi Rendere leggibili le opzioni di Selezione.

Selezione multipla

Un numero qualsiasi di scelte dal tuo elenco. Le opzioni non possono contenere virgole.

Data

Una data, come un compleanno o il giorno di un evento. Arriva come Date alla mezzanotte UTC di quel giorno, quindi leggila con timeZone: "UTC" per ritrovare lo stesso giorno:

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

Fuso orario

Un fuso orario, con il suo nome IANA, come "Europe/London". Passalo come timeZone quando formatti un orario. Per usare il fuso orario della cornice non ti serve un input: usa useTimeZone.

Indirizzo

Un indirizzo o un luogo, con suggerimenti mentre le persone digitano. Trasformalo in coordinate con useGeocode.

Icona

Un’icona scelta dalle persone. Disegnala con Icon, dopo aver convertito il valore con inputIconName:

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

Un elenco di valori, tutti di un unico Tipo di elemento, come più simboli di titoli azionari. Il tipo di elemento può essere qualsiasi tipo tranne Array e Sensibile. Quando è Selezione o Selezione multipla, imposta anche le sue Opzioni dell’elemento.