Types d’entrées

Chaque entrée a un type, qui détermine le champ que les gens remplissent et ce que useInputs donne à votre code. Une entrée laissée vide arrive sous la forme undefined.

Type	Ce que les gens remplissent	Ce que votre code reçoit
Chaîne de caractères	Une ligne de texte	string
Sensible	Du texte masqué pendant la saisie	string
Nombre	Un nombre	number
Sélection	Un choix dans votre liste d’options	string
Sélection multiple	Autant de choix que voulu dans votre liste	string[]
Date	Une date, avec un sélecteur de date	Date
Fuseau horaire	Un fuseau horaire, dans une liste	string, par exemple "Europe/London"
Adresse	Une adresse, avec des suggestions	string
Icône	Une icône, avec un sélecteur d’icônes	string : à passer à inputIconName
Tableau	Une liste de valeurs d’un autre type	Un tableau de valeurs de ce type

Chaîne de caractères

Du texte libre, comme un nom de ville, un symbole boursier ou un terme de recherche.

Sensible

Du texte masqué pendant la saisie, comme un mot de passe. Utilisez-le pour demander quelque chose de privé à la personne qui installe votre widget, comme sa propre clé d’API ou le lien d’un agenda privé. Pour une clé qui vous appartient, utilisez plutôt une Entrée privée.

Nombre

Un nombre, par exemple le nombre de titres d’actualité à afficher.

Sélection

Un choix dans une liste d’options que vous rédigez, comme une devise ou une source d’actualités. Rédigez des options faites pour être lues, et convertissez-les en codes dans votre widget. Consultez Rendre les options d’une sélection lisibles.

Sélection multiple

Autant de choix que voulu dans votre liste. Les options ne peuvent pas contenir de virgule.

Date

Une date, comme un anniversaire ou le jour d’un événement. Elle arrive sous la forme d’une Date à minuit UTC ce jour-là. Lisez-la donc avec timeZone: "UTC" pour retrouver le même jour :

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

Fuseau horaire

Un fuseau horaire, sous son nom IANA, par exemple "Europe/London". Passez-le comme timeZone lorsque vous formatez une heure. Pour utiliser le fuseau horaire du cadre lui-même, vous n’avez pas besoin d’entrée : utilisez useTimeZone.

Adresse

Une adresse ou un lieu, avec des suggestions pendant la saisie. Convertissez-la en coordonnées avec useGeocode.

Icône

Une icône choisie par la personne. Dessinez-la avec Icon, en passant la valeur à 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;
};

Tableau

Une liste de valeurs, toutes d’un même Type d’élément, comme plusieurs symboles boursiers. Le type d’élément peut être n’importe quel type, sauf Tableau et Sensible. S’il s’agit de Sélection ou de Sélection multiple, définissez aussi ses Options de l’élément.