Saltar al contenido principal

Biblioteca Blotch

La biblioteca Blotch es el conjunto de hooks y componentes que puede usar cualquier widget. Los hooks le dan a tu widget sus entradas, datos de API, la zona horaria y el idioma del marco, y mucho más. Los componentes dibujan texto, gráficos, calendarios, mapas y otras piezas habituales con un estilo pensado para la tinta electrónica (e-ink): en blanco y negro, nítido y legible desde el otro lado de una habitación.

Importa desde la biblioteca con el prefijo ~lib/. Cada página de esta referencia muestra su importación:

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

No hay nada que instalar. La biblioteca está siempre disponible en el Estudio de widgets, con autocompletado para cada hook, componente y prop.

Qué contiene​

  • Los Hooks leen todo lo que tu widget sabe del lugar donde se ejecuta: useInputs para sus ajustes, useFetch para los datos, useLayoutShape para el tamaño de su espacio, y useTimeZone y usePreferredLanguage para los ajustes del marco.
  • Los componentes de Tipografía, como Heading, Paragraph y Display, componen el texto en una escala adecuada para la pantalla.
  • Los componentes de Diseño, como Card y Brim, organizan las partes de un widget.
  • Los componentes de Visualización de datos, como Stat, Table y Timeline, muestran cifras y listas, y los mapas muestran lugares y rutas.
  • Los componentes de Gráficos dibujan números como líneas, barras, anillos y mucho más. Para empezar, consulta Representar tus datos en gráficos.
  • Los componentes de Calendario muestran eventos por día, semana o mes. Consulta Mostrar un calendario compartido.
  • Icon dibuja cualquiera de miles de iconos, y QRCode enlaza un widget con más contenido en el móvil.

Ejemplos en directo​

Todos los ejemplos de estas páginas son en directo: los dibuja el Storybook de la biblioteca, en el modo claro u oscuro del sitio, así que lo que ves es exactamente lo que dibuja el componente. Abre un ejemplo en Storybook para cambiar sus props y ver el resultado al momento.