Código abierto · Licencia MIT

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 ranuts

Ver los componentes Dar una estrella en GitHub

En vivohtml

<r-button type="primary">Principal</r-button>
<r-button>Predeterminado</r-button>
<r-button type="warning">Aviso</r-button>

<r-progress percent="66"></r-progress>

<r-loading name="circle-line"></r-loading>
<r-checkbox checked>Suscribirme</r-checkbox>

Principal

Predeterminado

Aviso

Componentes ranui reales, funcionando en esta misma página.

40Componentes

90+Utilidades

8Idiomas

MITLicencia

ranui

Una biblioteca de Web Components independiente de cualquier framework. Coloca 40 elementos r- ya estilizados en Vue, React o HTML puro.

Explorar componentes

ranuts

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ón

Artículos

Textos largos sobre motores de renderizado, programación funcional, algoritmos de ordenación y la plataforma web.

Empezar a leer

Capacidades

Lo que la mayoría de bibliotecas deja fuera

Cinco en ranuts, cinco en ranui.

ranutsutilidades

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.

ranuicomponentes

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.

Primeros pasos

Instalar y usar

Instala ambos paquetes, registra los elementos una vez y úsalos donde quieras. Sin paso de compilación ni framework.

Instalar y registrar

$ npm i ranui ranuts

// register the <r-*> elements once
import 'ranui'
import { debounce } from 'ranuts'

Usar en cualquier sitio

<!-- 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.