學習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新功能。