学习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

欢迎一块儿学习，提issue，一块儿merge新功能。