Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ccj-007/react-speed-ui
⚡一个追求极致性能的react组件库
https://github.com/ccj-007/react-speed-ui
components react reactjs speed storybook ui
Last synced: 2 months ago
JSON representation
⚡一个追求极致性能的react组件库
- Host: GitHub
- URL: https://github.com/ccj-007/react-speed-ui
- Owner: ccj-007
- License: mit
- Created: 2022-06-22T00:30:33.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-28T13:58:30.000Z (about 2 years ago)
- Last Synced: 2024-12-08T16:52:36.130Z (2 months ago)
- Topics: components, react, reactjs, speed, storybook, ui
- Language: TypeScript
- Homepage: http://ccj-007.github.io/react-speed-ui
- Size: 8.25 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
README
react-speed-ui
极速组件库 : 速度不差、体积小巧、追求新技术的组件库
## 特色：
- 50 多个轻量组件开箱即用 📟
- TS 支持 💎
- 主题切换 💱
- 命名隔离 🔞
- 卡通风 🔫
- 单元测试 📧
- 支持按需加载 🎉
- storybook + vite 构建文档 👍
- 命令行直接生成组件模板
## 使用场景：
1. 用于快速搭建**个人应用**📨
2. 有时候写个**DEMO**，对样式和组件有要求，那么再适合不过了
## 启动 storybook 项目
```sh
npm run storybook
```
## 如何安装
> 使用 npm
```
npm i react-speed-ui -S
```
> 使用 yarn
```
yarn add react-speed-ui
```
> SDK 引入
```js
```
> 使用 CDN (目前暂不支持)
## 快速使用
> 1. 全量引入
```js
import { Button } from 'react-speed-ui';
import 'react-speed-ui/dist/css/speed.min.css';
const App: React.FC = () => (
<>
danger button
>
);
export default App;
```
> 2. 按需引入
- esm 导入
```js
import Button from 'react-speed-ui/dist/esm/components/Button';
import 'react-speed-ui/dist/css/components/button.css';
```
- cjs 导入
```js
const Button = require('react-speed-ui/dist/lib/components/Button').default;
require('react-speed-ui/dist/css/components/button.css');
```
> 3. 自动化按需导入
- 原目录结构无法实现 babel-import-plugin 的插件自动导入，所以自己手动封装了 babel 插件来实现适合本组件库的按需导入 js、css，同时也具备了扩展性。虽然 es
6 的静态编译带来了 tree-sharking 的摇钱树优化，对 css 文件是无法实现的，在 js 中一些异常的对象变量的引用传入函数中、类的语法在 babel 中的转化也会导致副作用的生成，不能使组件被完全优化。
```js
import { Button } from 'react-speed-ui';
ReactDOM.render(xxxx);
↓ ↓ ↓ ↓ ↓ ↓
import Button from 'react-speed-ui/dist/esm/components/Button';
import 'react-speed-ui/dist/css/components/button.css';
ReactDOM.render(xxxx);
```
### 如何配置（目前暂时未发布到 npm）
```shell
git clone [email protected]:ccj-007/babel-plugin-idea.git
cd ./import-plugin/plugin/plugin.js
```
将此文件拷贝到你的项目中并新建 babel.config.js 配置如下：
```json
module.exports = {
"plugins": [
[
require('../babel-preset-import-plugin'),
{
"libName": "react-speed-ui", //组件库名
"stylePath": "dist/css/components", //样式路径
"styleOneLower": true, //样式文件首字母是否大写
"componentPath": "dist/lib/components", //组件文件路径
},
],
];
}
```
在 create-react-app 配置需`npm run eject`, 然后在 webpack.config.js 配置 babel-loader，传入对应的 plugins 配置，某些情况下模块解析失败，注意默认配置了缓存，可以关闭 cacheDirectory 或在 node_modules 下.cache 手动删除缓存即可恢复。