Código aberto · Licença MIT

UmabibliotecadeUIemWebComponentseutilitáriostipados

O ranui traz 40 elementos r- independentes de framework; o ranuts reúne mais de 90 utilitários TypeScript compatíveis com tree-shaking. Use-os no Vue, no React ou em HTML puro, sem nenhuma etapa de build.

npm i ranui ranuts

Ver os componentes Dar uma estrela no GitHub

Ao vivo

Componentes ranui reais, rodando nesta própria página.

40Componentes

90+Utilitários

8Idiomas

MITLicença

ranui

Uma biblioteca de Web Components independente de framework. Coloque 40 elementos r- já estilizados no Vue, no React ou em HTML puro.

Explorar componentes

ranuts

Mais de 90 utilitários tipados para strings, objetos, cor, tempo, arquivos e o DOM. Compatíveis com tree-shaking e sem dependências.

Ler a documentação

Artigos

Textos longos sobre motores de renderização, programação funcional, algoritmos de ordenação e a plataforma web.

Começar a ler

Recursos

O que a maioria das bibliotecas deixa de fora

Cinco no ranuts, cinco no ranui.

ranutsutilitários

Bridge PostMessageBridgeRPC baseado em promessas sobre postMessage entre iframes, workers e abas, com transporte por clonagem estruturada e canais isolados.
Visual ApplicationUm grafo de cena no estilo do PixiJS, com backend de renderização intercambiável: WebGPU, WebGL ou Canvas.
DOM virtual h() · init()Um DOM virtual no estilo do snabbdom: hyperscript, patch, módulos intercambiáveis e hooks de ciclo de vida.
TOTP TOTPSenhas de uso único conforme a RFC-6238, de SHA-1 a SHA3-512, sem nenhuma dependência de criptografia.
Registro MIME getMime()Uma busca bidirecional MIME ⇄ extensão com cerca de 1000 entradas.

ranuicomponentes

Reprodutor <r-player>Um reprodutor de vídeo HLS com taxa de bits adaptativa e núcleo de controle modular.
Seletor de cor <r-colorpicker>Um seletor HSV completo, com controles de matiz e alfa e saída HEX / RGBA em tempo real.
Gráfico de radar <r-radar>Um gráfico de radar desenhado em canvas, com rótulos e estilos de rótulo por eixo.
Fórmulas <r-math>Converte LaTeX em MathML nativo com o Temml carregado sob demanda, a partir de um único atributo.
Cartão raspadinha <r-scratch>Uma raspagem interativa em canvas, com limiar de conclusão.

Primeiros passos

Instalar e usar

Instale os dois pacotes, registre os elementos uma vez e use-os em qualquer lugar. Sem etapa de build nem framework.

Instalar e registrar

$ npm i ranui ranuts

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

Usar em qualquer lugar

<!-- Vue, React, or plain HTML -->
<r-button type="primary">Save</r-button>
<r-progress percent="66"></r-progress>

Funciona em qualquer lugar

Custom elements baseados em padrões rodam em qualquer framework, ou em nenhum.

Totalmente tipado

Escrito em TypeScript e publicado com as declarações de tipos.

Instalável e offline

A documentação é um PWA, com seu próprio service worker.

Oito idiomas

A referência do ranui e do ranuts é mantida em oito idiomas.