react-ez-ui/README.md

A customizable component library for React that does not rely on predefined UI styles, allowing complete control over the design and content of the components.

# react-ez-ui

> react-ez-ui is a customizable component library for React that does not rely on predefined UI styles, allowing complete control over the design and content of the components.

## 🌐 Language Switch

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

## ⚡ Do You Need react-ez-ui?

- Does your code include third-party UI libraries like Antd?
- Are you using multi-platform tools such as TaroJS?

> If the answer to all the above is "no", keep reading!

## 🚀 What Does react-ez-ui Solve?

In everyday development, many components are required, but UI framework components come with basic styles, making it difficult to achieve extensive customization. `react-ez-ui` simplifies this by providing the "actions" only, much like `antd-pro`'s `ModalForm`, while allowing you to fully customize both the style and content.

## 📦 Installation

You can install it directly via npm without needing separate type declaration files. TypeScript support is included.

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

## 🔨 Usage

```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="Loading..."
          onClick={async () => {
            await new Promise((resolve) => {
              setTimeout(() => {
                resolve(true);
              }, 1000);
            });

            console.log(1);
          }}
        >
          <button>Click Me</button>
        </LoadingButton>
      </div>
    </>
  );
};

export default App;
```

## 🤝 Contribution Guide

We welcome contributions to make `react-ez-ui` even better!

1. Clone the repository
2. Create a new branch (`git checkout -b feature-new-component-name`)
3. Commit your changes (`git commit -m '✨ Add new component: xxx'`)
4. Push to the component branch (`git push origin feature-new-component-name`)
5. Create a `Pull Request`

## 📜 License

This project is licensed under the [MIT license](./LICENSE).

---