# react-form-create

> 一个基于 React + TS 的表单设计器

Latest version **1.0.0** (published 2022-02-15) · 0 weekly downloads

## Install

```sh
npm install react-form-create
pnpm add react-form-create
yarn add react-form-create
bun add react-form-create
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-02-15 |
| First published | 2022-02-15 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 1.8 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 46 |
| Author | fuchengwei |
| Maintainers | fuchengwei |
| Keywords | Form, FormCreate, React, Antd, Drag |

## Links

- npm: https://www.npmjs.com/package/react-form-create
- Repository: https://github.com/fuchengwei/react-form-create-base
- Issues: https://github.com/fuchengwei/react-form-create-base/issues
- npm.io page: https://npm.io/package/react-form-create

## Dependencies (10)

- [antd](https://npm.io/package/antd.md) ^4.18.2
- [uuid](https://npm.io/package/uuid.md) ^8.3.2
- [react](https://npm.io/package/react.md) ^17.0.2
- [moment](https://npm.io/package/moment.md) ^2.29.1
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [sortablejs](https://npm.io/package/sortablejs.md) ^1.14.0
- [react-color](https://npm.io/package/react-color.md) ^2.19.3
- [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) ^4.7.0
- [@babel/standalone](https://npm.io/package/@babel/standalone.md) ^7.16.7

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2022-02-15
- 0.0.4 — 2022-02-15
- 0.0.3 — 2022-02-15
- 0.0.2 — 2022-02-15
- 0.0.1 — 2022-02-15

## README

# react-from-create

基于 React + TS 的自定义表单生成器。主要用于动态页面渲染、页面个性化、动态表单等功能。 支持 npm 与 cdn 引入的方式。

## ✨ 特性

- 丰富的组件（包含 antd 绝大部分组件）
- 灵活布局
- 远端数据获取
- 自定义样式
- 自定义 Class
- 状态管理
- 事件处理
- 生命周期管理
- 表单控制
- 动态渲染 JSX

## 示例地址（Github）

https://fuchengwei.github.io/react-form-create-base/src/example/index.html

## 示例地址（Gitee）

http://fuchengwei.gitee.io/react-form-create-base/src/example/index.html

## Github

https://github.com/fuchengwei/react-form-create-base

## npm

https://www.npmjs.com/package/react-form-create

## 特性演示

- 自定义样式
- 自定义 Class

[![H62Q3t.gif](https://s4.ax1x.com/2022/02/14/H62Q3t.gif)](https://imgtu.com/i/H62Q3t)

- 状态管理
- 事件处理

[![H628u8.gif](https://s4.ax1x.com/2022/02/14/H628u8.gif)](https://imgtu.com/i/H628u8)

- 动态渲染 JSX

[![H621jf.gif](https://s4.ax1x.com/2022/02/14/H621jf.gif)](https://imgtu.com/i/H621jf)

- 表单控制

[![H62lgP.gif](https://s4.ax1x.com/2022/02/14/H62lgP.gif)](https://imgtu.com/i/H62lgP)

## 安装

### 使用 npm 或 yarn 安装

**我们推荐使用 npm 或 yarn 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

```shell
$ npm install react-form-create --save
```

```shell
$ yarn add react-form-create --save
```

### 浏览器引入

在浏览器中使用 `script` 标签直接引入文件，并使用全局变量 `formCreate`。

我们在 npm 发布包内的 `react-form-create/dist`提供了 `react-form-create.es.js` `react-form-create.umd.js` `style.css`。你也可以通过 [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/vue-form-create/badge)](https://www.jsdelivr.com/package/npm/react-form-create) 或 [UNPKG](https://unpkg.com/react-form-create/dist/) 进行下载。

```javascript
<script src="https://unpkg.com/react-form-create/dist/react-form-create.umd.js"></script>
```

### 注意

1. 无论 npm 或者 cdn 引入都需要在全局以 CDN 的方式引入 [monaco-editor](https://microsoft.github.io/monaco-editor/) 。

   ```javascript
   <script src="https://unpkg.com/monaco-editor/min/vs/loader.js"></script>
   <script>
      require.config({ paths: { vs: 'https://unpkg.com/monaco-editor/min/vs' } })
      window.MonacoEnvironment = {
        getWorkerUrl: function (workerId, label) {
          return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
            self.MonacoEnvironment = {
              baseUrl: 'https://unpkg.com/monaco-editor/min/'
            };
            importScripts('https://unpkg.com/monaco-editor/min/vs/base/worker/workerMain.js');`)}`
        }
      }
      require(['vs/editor/editor.main'], function () {})
    </script>
   ```

2. cdn 引入 ant-design 需要自行引入 [moment](http://momentjs.com/) 以及 [babel-standalone](https://github.com/babel/babel-standalone)。

### 示例

**npm 引入**

```javascript
import React from 'react'
import ReactDOM from 'react-dom'
import { DesignForm } from 'react-form-create'
import 'antd/dist/antd.css'
import 'react-form-create/dist/style.css'

ReactDOM.render(
  <React.StrictMode>
    <DesignForm />
  </React.StrictMode>,
  document.getElementById('root')
)
```

**浏览器引入**

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://unpkg.com/antd/dist/antd.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/react-form-create/dist/style.css" />
    <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/moment/moment.js"></script>
    <script src="https://unpkg.com/antd/dist/antd.min.js"></script>
    <script src="https://unpkg.com/babel-standalone"></script>
    <script src="https://unpkg.com/react-form-create/dist/react-form-create.umd.js"></script>
    <script src="https://unpkg.com/monaco-editor/min/vs/loader.js"></script>
    <script>
      require.config({
        paths: { vs: 'https://unpkg.com/monaco-editor/min/vs' }
      })
      window.MonacoEnvironment = {
        getWorkerUrl: function (workerId, label) {
          return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
            self.MonacoEnvironment = {
              baseUrl: 'https://unpkg.com/monaco-editor/min/'
            };
            importScripts('https://unpkg.com/monaco-editor/min/vs/base/worker/workerMain.js');`)}`
        }
      }
      require(['vs/editor/editor.main'], function () {})
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      ReactDOM.render(<DesignForm />, document.getElementById('root'))
    </script>
  </body>
</html>
```

## 组件说明

### 表单设计器（DesignForm）

#### 示例

```typescript
import React, { useRef } from 'react'
import { DesignForm, DesignFormRef } from 'react-form-create'
import 'antd/dist/antd.css'
import 'react-form-create/dist/style.css'

export default () => {
  const ref = useRef<DesignFormRef>(null)

  return <DesignForm ref={ref} />
}
```

#### API

##### Props

|     参数     |         说明         |  类型   | 默认值 |
| :----------: | :------------------: | :-----: | :----: |
|   preview    |  设计器预览操作按钮  | boolean |  true  |
| generateCode |  设计器生成代码按钮  | boolean |  true  |
| generateJson | 设计器生成 Json 按钮 | boolean |  true  |
|  uploadJson  | 设计器导入 JSON 按钮 | boolean |  true  |
|  clearable   |    设计器清空按钮    | boolean |  true  |

##### 方法

通过 ref 可以获取到实例并调用实例方法

|      方法名       |                说明                |                参数                 |
| :---------------: | :--------------------------------: | :---------------------------------: |
|     getJson()     |     获取设计器配置的 JSON 数据     |                  -                  |
|  setJson(value)   |        设置设计器的配置信息        |       通过 getJson 获取的数据       |
|      clear()      |             清空设计器             |                                     |
| getTemplate(type) | 获取设计器生成的可以直接使用的代码 | type 的类型为 'component' 或 'html' |

### 表单生成器（GenerateForm）

#### 示例

```typescript
import React, { useRef } from 'react'
import { GenerateForm, GenerateFormRef } from 'react-form-create'
import 'antd/dist/antd.css'
import 'react-form-create/dist/style.css'

export default () => {
  const ref = useRef<GenerateFormRef>(null)

  return <GenerateForm widgetInfoJson="表单设计器生成的 JSON" ref={ref} />
}
```

#### API

##### Props

|      参数      |                     说明                      |  类型  | 默认值 |
| :------------: | :-------------------------------------------: | :----: | :----: |
| widgetInfoJson | 表单 json 配置数据（从表单设计器获取的 json） | string |   -    |
|   formValue    |     表单数据（从表单生成器获取的 value）      | object |   -    |

##### 方法

通过 ref 可以获取到实例并调用实例方法

|  方法名   |             说明             | 参数 |
| :-------: | :--------------------------: | :--: |
| getData() | 获取表单数据（返回 Promise） |  -   |
|  reset()  |         重置表单数据         |  -   |

## 功能说明

### 远端数据

单选框，多选框，下拉选择框、级联选择器等选择项需要通过数据生成，这时可以配置远端数据。

设置远端方法地址与返回值。

[![Hcznzt.png](https://s4.ax1x.com/2022/02/15/Hcznzt.png)](https://imgtu.com/i/Hcznzt)

### 文件上传

填写服务器上传地址、参数名等配置信息。

[![Hcz4eO.png](https://s4.ax1x.com/2022/02/15/Hcz4eO.png)](https://imgtu.com/i/Hcz4eO)

### 页面生命周期管理

React 页面渲染生命周期函数

[![HgSNAe.png](https://s4.ax1x.com/2022/02/15/HgSNAe.png)](https://imgtu.com/i/HgSNAe)

### 全局使用 antd 中 Message、Notification、Modal 方法

在组件事件、生命周期、动态 Props 中都可以使用 antd.xxx 来调用 antd 的方法或者组件

[![HgpG2n.png](https://s4.ax1x.com/2022/02/15/HgpG2n.png)](https://imgtu.com/i/HgpG2n)

目前是第一版 详细的文档还需要时间来编写 如果你有更好的建议、需求或者使用中有任何问题可以提 issues 或者加微信沟通 fuchengwei325795

（PS:）目前免费开源的是基础版本,有高级版或高级源码版需要的可加微信 fuchengwei325795

---
_Source: https://npm.io/package/react-form-create · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._