# react-ez-ui

> react-ez-ui 是一个为 React 提供的可定制组件库，不依赖预设的 UI 样式，完全控制组件的设计和内容

## 🌐 切换语言

- [English](./README.md)
- [中文](./README.zh-CN.md)

## ⚡ 判断你是否需要用到react-ez-ui

- 代码中是否有第三方UI库，例如Antd
- 是否使用多平台工具，例如TaroJs

> 如果答案全部是否，请继续往下看

## 🚀 react-ez-ui主要解决了什么

日常开发中需要用到很多组件，但是UI框架的组件都有基本样式，很难进行高度的自定义，`react-ez-ui`相当于只帮你实现了“动作”，类似于`antd-pro`的`ModalForm`，样式和内容你可以完全自定义。

## 📦 安装

使用npm直接安装，无需单独安装声明文件，即可获得typescript的类型声明

```sh
npm install react-ez-ui
```

## 🔨 使用

```tsx
import React from "react";
import { Picker, LoadingButton } from "react-ez-ui";

const App: React.FC = () => {
	return (
		<>
			<div>
				<Picker
					content={(cb) => {
						return (
							<div
								style={{
									display: "flex",
									justifyContent: "center",
									alignItems: "center",
									height: "30vh",
									backgroundColor: "#fff",
								}}
							>
								<button onClick={cb}>close</button>
							</div>
						);
					}}
				>
					<button>open</button>
				</Picker>
			</div>
			<div>
				<LoadingButton
					loadingText="正在加载"
					onClick={async () => {
						await new Promise((resolve) => {
							setTimeout(() => {
								resolve(true);
							}, 1000);
						});

						console.log(1);
					}}
				>
					<button>点我</button>
				</LoadingButton>
			</div>
		</>
	);
};

export default App;
```

## 🤝 Contribution Guide

欢迎参与贡献，来壮大`react-ez-ui`

1. 克隆本仓库
2. 创建新的分支 (`git checkout -b feature-new-component-name`)
3. 提交你的修改 (`git commit -m '✨ Add new component: xxx'`)
4. 推送到组件分支 (`git push origin feature-new-component-name`)
5. 发送一个`Pull Request`

## 📜 许可证

本项目基于[MIT license](./LICENSE)

---