Tipos de entrada

Cada entrada tiene un tipo, que decide el campo que rellena la gente y lo que useInputs le da a tu código. Cualquier entrada que se deje en blanco llega como undefined.

Tipo	Lo que rellena la gente	Lo que recibe tu código
Cadena	Una línea de texto	string
Sensible	Texto que se oculta mientras se escribe	string
Número	Un número	number
Selección	Una opción de tu lista de opciones	string
Selección múltiple	Cualquier número de opciones de tu lista	string[]
Fecha	Una fecha, con un selector de fechas	Date
Zona horaria	Una zona horaria, de una lista	string, como "Europe/London"
Dirección	Una dirección, con sugerencias	string
Icono	Un icono, con un selector de iconos	string: pásalo por inputIconName
Array	Una lista de valores de otro tipo	Un array con valores de ese tipo

Cadena

Texto libre, como el nombre de una ciudad, el símbolo de un valor bursátil o un término de búsqueda.

Sensible

Texto que se oculta mientras se escribe, como una contraseña. Úsalo para pedir algo privado a la persona que instala tu widget, como su propia clave de API o el enlace a un calendario privado. Para una clave tuya, usa en su lugar una entrada privada.

Número

Un número, como cuántos titulares mostrar.

Selección

Una opción de una lista de opciones que escribes tú, como una moneda o una fuente de noticias. Escribe opciones pensadas para que la gente las lea y conviértelas en códigos dentro de tu widget. Consulta Hacer legibles las opciones de una selección.

Selección múltiple

Cualquier número de opciones de tu lista. Las opciones no pueden contener comas.

Fecha

Una fecha, como un cumpleaños o el día de un evento. Llega como un Date a medianoche UTC de ese día, así que léela con timeZone: "UTC" para obtener el mismo día:

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

Zona horaria

Una zona horaria, con su nombre de IANA, como "Europe/London". Pásala como timeZone cuando des formato a una hora. Para usar la zona horaria del propio marco no necesitas una entrada: usa useTimeZone.

Dirección

Una dirección o un lugar, con sugerencias mientras la gente escribe. Conviértela en coordenadas con useGeocode.

Icono

Un icono que elige la gente. Dibújalo con Icon, pasando el valor por 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

Una lista de valores, todos de un mismo Tipo de elemento, como varios símbolos bursátiles. El tipo de elemento puede ser cualquiera excepto Array y Sensible. Cuando sea Selección o Selección múltiple, configura también sus Opciones del elemento.