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

✨ 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

• Home page
  
• npm仓库
  
• 组件使用文档
  
• github仓库——欢迎学习，start，merge
  
• rockui-pro——基于rockui的项目
  
• rockui-pro——github
  
• Icon Doc
  

❤️功能

• 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