UI Component library based on Web Component
English | 中文
- 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.
Using npm:
npm install ranui@latest --save
See components and use examples
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';
Or
import 'ranui/button';
- UMD, IIFE, CJS
<script src="./ranui/dist/umd/index.umd.cjs"></script>
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
<script src="./ranui/dist/umd/index.umd.cjs"></script>
<body>
<r-button>Button</r-button>
</body>
import 'ranui';
const Button = document.createElement('r-button');
Button.appendChild('this is button text');
document.body.appendChild(Button);
import 'ranui';
const App = () => {
return (
<>
<r-button>Button</r-button>
</>
);
};
<template> <r-button></r-button> </template> <script> import 'ranui'; </script>
// 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>
);
};
35/F,Tencent Building,Kejizhongyi Avenue,Nanshan District,Shenzhen
