ran
Português
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 componentesDar uma estrela no GitHub
Ao vivohtml
<r-button type="primary">Principal</r-button>
<r-button>Padrão</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>Inscrever-me</r-checkbox>
PrincipalPadrãoAviso
Inscrever-me
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.