Javascript

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

本文主要是介绍学习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
PRs Welcome

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

这篇关于学习React Hooks和TypeScript打造的仿Antd的UI组件库的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!