UnabibliotecadeUIenWebComponentsyutilidadestipadas
ranui trae 40 elementos r- independientes de cualquier framework; ranuts reúne más de 90 utilidades TypeScript compatibles con tree-shaking. Úsalos en Vue, en React o en HTML puro, sin ningún paso de compilación.
npm i ranui ranutsranui
Una biblioteca de Web Components independiente de cualquier framework. Coloca 40 elementos r- ya estilizados en Vue, React o HTML puro.
Explorar componentesranuts
Más de 90 utilidades tipadas para cadenas, objetos, color, tiempo, archivos y el DOM. Compatibles con tree-shaking y sin dependencias.
Leer la documentaciónArtículos
Textos largos sobre motores de renderizado, programación funcional, algoritmos de ordenación y la plataforma web.
Empezar a leerLo que la mayoría de bibliotecas deja fuera
Cinco en ranuts, cinco en ranui.
- Bridge
PostMessageBridgeRPC basado en promesas sobre postMessage entre iframes, workers y pestañas, con transporte por clonado estructurado y canales aislados. - Visual
ApplicationUn grafo de escena al estilo de PixiJS, con backend de renderizado intercambiable: WebGPU, WebGL o Canvas. - DOM virtual
h() · init()Un DOM virtual al estilo de snabbdom: hyperscript, patch, módulos intercambiables y hooks de ciclo de vida. - TOTP
TOTPContraseñas de un solo uso según RFC-6238, de SHA-1 a SHA3-512, sin ninguna dependencia criptográfica. - Registro MIME
getMime()Una búsqueda bidireccional MIME ⇄ extensión con unas 1000 entradas.
- Reproductor
<r-player>Un reproductor de vídeo HLS con tasa de bits adaptativa y un núcleo de control modular. - Selector de color
<r-colorpicker>Un selector HSV completo con deslizadores de tono y alfa, y salida HEX / RGBA en vivo. - Gráfico de radar
<r-radar>Un gráfico de radar dibujado en canvas, con etiquetas y estilos de etiqueta por eje. - Fórmulas
<r-math>Convierte LaTeX en MathML nativo con Temml cargado bajo demanda, desde un único atributo. - Tarjeta rasca y gana
<r-scratch>Un raspado interactivo en canvas, con umbral de finalización.
Instalar y usar
Instala ambos paquetes, registra los elementos una vez y úsalos donde quieras. Sin paso de compilación ni framework.
$ npm i ranui ranuts // register the <r-*> elements once import 'ranui' import { debounce } from 'ranuts'
<!-- Vue, React, or plain HTML --> <r-button type="primary">Save</r-button> <r-progress percent="66"></r-progress>
Funciona en todas partes
Los custom elements estándar funcionan en cualquier framework, o sin ninguno.
Totalmente tipado
Escrito en TypeScript y publicado con sus declaraciones de tipos.
Instalable y sin conexión
La documentación es una PWA, con su propio service worker.
Ocho idiomas
La referencia de ranui y ranuts se mantiene en ocho idiomas.