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 --saveSee 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/dist/index.d.ts';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>
);
};