Aller au contenu principal

Bibliothèque Blotch

La bibliothèque Blotch est l’ensemble des hooks et des composants que tout widget peut utiliser. Les hooks fournissent à votre widget ses entrées, des données d’API, le fuseau horaire et la langue du cadre, et bien plus. Les composants dessinent du texte, des graphiques, des calendriers, des cartes et d’autres éléments courants dans un style conçu pour l’encre électronique (e-ink) : en noir et blanc, net, et lisible depuis l’autre bout d’une pièce.

Importez depuis la bibliothèque avec le préfixe ~lib/. Chaque page de cette référence indique son import :

import { useFetch } from "~lib/use-fetch";
import { Heading } from "~lib/typography";
import { LineChart } from "~lib/charts/line-chart";

Il n’y a rien à installer. La bibliothèque est toujours disponible dans le Studio de widgets, avec l’autocomplétion de chaque hook, composant et prop.

Ce qu’elle contient​

  • Les hooks lisent tout ce que votre widget sait de l’endroit où il s’exécute : useInputs pour ses réglages, useFetch pour les données, useLayoutShape pour la taille de son emplacement, et useTimeZone et usePreferredLanguage pour les paramètres du cadre.
  • Les composants de typographie, comme Heading, Paragraph et Display, composent le texte selon une échelle adaptée à l’écran.
  • Les composants de mise en page, comme Card et Brim, organisent les parties d’un widget.
  • Les composants d’affichage des données, comme Stat, Table et Timeline, présentent des chiffres et des listes, et les cartes géographiques montrent des lieux et des itinéraires.
  • Les graphiques représentent des nombres sous forme de lignes, de barres, d’anneaux et plus encore. Pour commencer, consultez Mettre vos données en graphique.
  • Les calendriers affichent des événements par jour, par semaine ou par mois. Consultez Afficher un calendrier partagé.
  • Icon dessine n’importe laquelle de milliers d’icônes, et QRCode relie un widget à davantage de contenu sur un téléphone.

Exemples en direct​

Chaque exemple de ces pages est en direct : il est dessiné par le Storybook de la bibliothèque, dans le mode clair ou sombre du site, si bien que ce que vous voyez est exactement ce que dessine le composant. Ouvrez un exemple dans Storybook pour modifier ses props et voir aussitôt le résultat.