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.
Using npm:
npm install @ranui/react --save
See components and use examples
https://github.com/chaxus/ran/blob/main/packages/ranui-react/example/index.tsx
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';
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} />
</>
);
};