Ranui NPM | npm.io

ranui

UI Component library based on Web Component

English | 中文

Feature

Cross-Framework Compatibility: Works seamlessly with React, Vue, Preact, SolidJS, Svelte, and more. Integrates with any JavaScript project following W3C standards.
Pure Native Experience: No need for npm, React/Vue, or build tools. Easy to start, like using native div tags, simplifying structure and reducing learning costs.
Modular Design: Breaks systems into small, reusable components for enhanced maintainability and scalability.
Open-Source: Licensed under MIT, providing free access to all source code for personal or commercial use.
Interactive Documentation: Offers detailed, interactive documentation with live examples for efficient learning.
Type-Checking: Built on TypeScript with full type support, ensuring robust and maintainable code.
Stability and Durability: Framework independent (React/vue), avoid disruptive updates, and ensure continuous project operation.

Install

Using npm:

npm install ranui@latest --save

Document and Example

See components and use examples

Import

Support for on-demand import, which can reduce the size of loaded js

import 'ranui/button';

If there is a style problem, you can import the style manually

import 'ranui/style';

If there is a type problem, you can manually import the type

import 'ranui/typings';
// or
import 'ranui/dist/index.d.ts';
// or
import 'ranui/type';
// or
import 'ranui/dist/typings';

Not all of them. Just pick one that works

Support global import

import 'ranui';

ES module

import 'ranui';

import 'ranui/button';

UMD, IIFE, CJS

<script src="./ranui/dist/umd/index.umd.cjs"></script>

Usage

It is based on the Web Component, you can use it without focusing on the framework.

In most cases, you can use it just like a native div tag

Here are some examples:

html
js
jsx
vue
tsx

html

<script src="./ranui/dist/umd/index.umd.cjs"></script>

<body>
  <r-button>Button</r-button>
</body>

js

import 'ranui';

const Button = document.createElement('r-button');
Button.appendChild('this is button text');
document.body.appendChild(Button);

jsx

import 'ranui';

const App = () => {
  return (
    <>
      <r-button>Button</r-button>
    </>
  );
};

vue

<template>
  <r-button></r-button>
</template>
<script>
import 'ranui';
</script>

tsx

// react 18
import type { SyntheticEvent } from 'react';
import React, { useRef } from 'react';
import 'ranui';

const FilePreview = () => {
  const ref = useRef<HTMLDivElement | null>(null);
  const uploadFile = (e: SyntheticEvent<HTMLDivElement>) => {
    if (ref.current) {
      const uploadFile = document.createElement('input');
      uploadFile.setAttribute('type', 'file');
      uploadFile.click();
      uploadFile.onchange = (e) => {
        const { files = [] } = uploadFile;
        if (files && files?.length > 0 && ref.current) {
          ref.current.setAttribute('src', '');
          const file = files[0];
          const url = URL.createObjectURL(file);
          ref.current.setAttribute('src', url);
        }
      };
    }
  };
  return (
    <div>
      <r-preview ref={ref}></r-preview>
      <r-button type="primary" onClick={uploadFile}>
        choose file to preview
      </r-button>
    </div>
  );
};

ranui v0.1.10-alpha.19