Skip to content

Latest commit

 

History

History

ranui

readme.md

ranui

UI Component library based on Web Component

Build Status npm-v npm-d brotli module formats: umd, esm

English | 中文

Feature

  1. Cross-Framework Compatibility: Works seamlessly with React, Vue, Preact, SolidJS, Svelte, and more. Integrates with any JavaScript project following W3C standards.
  2. 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.
  3. Modular Design: Breaks systems into small, reusable components for enhanced maintainability and scalability.
  4. Open-Source: Licensed under MIT, providing free access to all source code for personal or commercial use.
  5. Interactive Documentation: Offers detailed, interactive documentation with live examples for efficient learning.
  6. Type-Checking: Built on TypeScript with full type support, ensuring robust and maintainable code.
  7. 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';

Or

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>
  );
};

Contributors

Visitors

Meta

LICENSE (MIT)