ranui-react

@ranui/react

Ranui-based component library, encapsulated by react higher-order functions, for easy use in react.

ranui can still be used in react, but @ranui/react. is more convenient.

Not in the react framework, you can use ranui directly.

---

Install

Using npm:

npm install @ranui/react --save

Document

See components and use examples

Example

https://github.com/chaxus/ran/blob/main/packages/ranui-react/example/index.tsx

Import

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

import { Button } '@ranui/react'

For global components like preview and message, you need to import global styles

import '@ranui/react/style';

Usage

some example:

import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { Button, Preview, Radar, Tab, TabPane, message } from '@ranui/react';

const App = () => {
  const previewRef = useRef<Element>();

  const clickButton = () => {
    console.log('button click');
  };

  const changeInput = (e) => {
    console.log('input--->', e);
  };

  const uploadFile = (e: Event) => {
    e.preventDefault();
    e.stopPropagation();
    const preview: Element | undefined = previewRef.current;
    if (!preview) return message.warning('previewRef.current is undefined');
    const uploadFile = document.createElement('input');
    uploadFile.setAttribute('type', 'file');
    uploadFile.click();
    uploadFile.onchange = (e) => {
      const { files = [] } = uploadFile;
      if (files && files.length > 0) {
        preview.setAttribute('src', '');
        const file = files[0];
        const url = URL.createObjectURL(file);
        preview.setAttribute('src', url);
      }
    };
  };

  const abilitys = [
    {
      abilityName: '生命',
      scoreRate: '10',
      backgroundColor: 'red',
      fontSize: '30',
      fontColor: 'blue',
    },
    { abilityName: '攻击', scoreRate: '90' },
    { abilityName: '防御', scoreRate: '20' },
    { abilityName: '元素精通', scoreRate: '50' },
    { abilityName: '暴击率', scoreRate: '80' },
    { abilityName: '暴击伤害', scoreRate: '50' },
  ];

  return (
    <>
      <h1>Button</h1>
      <Button onClick={clickButton}>this is button</Button>
      <Button effect={false}>effect</Button>
      <Button icon="home">home icon</Button>
      <Button type="primary">this is button</Button>
      <h1>Tab</h1>
      <Tab type="text">
        <TabPane label="home" icon="home">
          home
        </TabPane>
        <TabPane label="user" icon="user">
          user
        </TabPane>
        <TabPane label="other">other</TabPane>
      </Tab>
      <h1>Preview</h1>
      <Button type="primary" onClick={uploadFile}>
        choose file to preview
      </Button>
      <Preview ref={previewRef}></Preview>
      <h1>Radar</h1>
      <Radar className="radar" abilitys={abilitys}></Radar>
      <h1>Input</h1>
      <Input onChange={changeInput} />
    </>
  );
};

Contributors

Visitors

Meta

LICENSE (MIT)