오픈소스 · MIT 라이선스

웹컴포넌트UI라이브러리와타입이붙은유틸리티

ranui는 프레임워크에 얽매이지 않는 r- 엘리먼트 40개를, ranuts는 트리 셰이킹이 되는 타입 유틸리티 90여 개를 제공합니다. Vue에서도 React에서도 순수 HTML에서도 빌드 단계 없이 그대로 씁니다.

npm i ranui ranuts

컴포넌트 둘러보기 GitHub에서 스타 주기

실시간

진짜 ranui 컴포넌트가 바로 이 페이지에서 돌아가고 있습니다.

40컴포넌트

90+유틸리티

8언어

MIT라이선스

ranui

프레임워크 비종속 Web Components 라이브러리. 스타일이 갖춰진 r- 엘리먼트 40개를 Vue, React, 순수 HTML 어디에나 넣을 수 있습니다.

컴포넌트 보기

ranuts

문자열, 객체, 색상, 시간, 파일, DOM을 다루는 타입 유틸리티 90여 개. 트리 셰이킹을 지원하고 의존성이 없습니다.

아티클

렌더링 엔진, 함수형 프로그래밍, 정렬 알고리즘, 웹 플랫폼을 다루는 긴 글.

읽기 시작하기

주요 기능

대부분의 라이브러리가 빼놓는 것

ranuts에서 다섯 가지, ranui에서 다섯 가지.

ranuts유틸리티

Bridge PostMessageBridgepostMessage 위에서 동작하는 프로미스 기반 RPC. iframe, 워커, 탭을 넘나들며 구조화 복제 전송과 채널 격리를 지원합니다.
Visual ApplicationPixiJS 스타일의 씬 그래프. WebGPU / WebGL / Canvas 렌더러를 갈아 끼울 수 있습니다.
가상 DOM h() · init()snabbdom 스타일의 가상 DOM: 하이퍼스크립트, patch, 교체 가능한 모듈과 생명주기 훅.
TOTP TOTPRFC-6238 일회용 비밀번호. SHA-1부터 SHA3-512까지, 암호 라이브러리 의존성은 없습니다.
MIME 레지스트리 getMime()약 1000개 항목의 MIME ⇄ 확장자 양방향 조회.

ranui컴포넌트

플레이어 <r-player>모듈화된 컨트롤러 코어를 갖춘 HLS 적응형 스트리밍 비디오 플레이어.
컬러 피커 <r-colorpicker>색상과 알파 슬라이더를 갖춘 완전한 HSV 피커. HEX / RGBA를 실시간으로 출력합니다.
레이더 차트 <r-radar>canvas로 그리는 레이더 차트. 축별 레이블과 축별 레이블 스타일을 지원합니다.
수식 <r-math>지연 로딩되는 Temml로, 속성 하나만으로 LaTeX을 네이티브 MathML로 렌더링합니다.
스크래치 카드 <r-scratch>완료 임계값이 있는, 긁어서 드러내는 canvas 인터랙션.

빠른 시작

설치하고 사용하기

두 패키지를 설치하고 엘리먼트를 한 번만 등록하면 어디서든 씁니다. 빌드 단계도 프레임워크도 필요 없습니다.

설치와 등록

$ 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>

어디서나 동작

표준 기반 커스텀 엘리먼트라 어떤 프레임워크에서도, 프레임워크 없이도 동작합니다.

완전한 타입

TypeScript로 작성했고 타입 선언까지 함께 배포합니다.

설치 가능 · 오프라인

문서 자체가 PWA이며 자체 서비스 워커를 갖습니다.

여덟 개 언어

ranui와 ranuts 레퍼런스는 여덟 개 언어로 관리됩니다.