学习React Hooks和TypeScript打造的仿Antd的UI组件库

2,314 阅读1分钟

✨ RockUI

学习React Hooks和TypeScript实现仿Antd的react UI组件库,并通过此组件库在create-react-app的基础上实现了一套简单的应用,下方链接

  • 样式解决方案——saas
  • 测试——Jest框架
  • Icon库基于react-fontawesome github 文档
  • 文档使用storybook进行展示
  • 使用eslint和prettier对代码风格进行约束
  • 使用见README.md,学习及开发中的问题与解决见STUDY_README.md

🔗 Links

❤️功能

  • Alert组件
  • Animation 动画组件
  • Bg首页背景组件
  • Button组件
  • Commissio日程组件
  • Icon图标库
  • Input组件
  • Menu菜单
  • Spider轮播图组件
  • Spin加载中
  • Table表格
  • Tab选项卡
  • Upload

🔨 Usage️ 部分功能展示

在这里插入图片描述

在这里插入图片描述

📦 Install

npm install rockui
yarn add rockui

Usage

import { Button, Icon } from "rockui";


const App = () => (
  <>
    <Button
      size={ButtonSize.Small}
      autoFocus
      onClick={e => {
        e.preventDefault();
      }}
      className="btn"
    >
      hello
    </Button>
    <Icon icon="coffee" theme="warning" size="2x" />
  </>
);

And import style manually:

import "rockui/dist/rockui.css";

⌨️ Development

$ git clone https://github.com/s2265681/rockui.git
$ cd rockui
$ npm install
$ npm start
$ 修改注释 src/index.tsx 组件发布 >>> 页面展示

🤝 Contributing
PRs Welcome

欢迎一起学习,提issue,一起merge新功能。