Last year I released a custom form plug-in based on Vue 3.0 + TS. Got a lot of digging friends affirmation. Of course, there are also a lot of problems, optimization and new requirements. Many people asked if there was a React version, so I made a version of the React version of custom forms plug-in based on React + TS. Of course, the React version this time brought many new functions and features. Now I have just finished the first version, so I will give a brief introduction. For small partners who have this need can experience online demo.

react-from-create

React + TS custom form generator. Mainly used for dynamic page rendering, page personalized, dynamic forms and other functions. Supports NPM and CDN import.

✨ features

  • Rich components (including most antD components)
  • Flexible layout
  • Remote data acquisition
  • Custom styles
  • The custom Class
  • State management
  • The event processing
  • Life cycle management
  • The form control
  • Dynamic rendering JSX

Example address (Github)

Fuchengwei. Making. IO/react – form -…

Example Address (Gitee)

Fuchengwei. Gitee. IO/react – form -…

Github

Github.com/fuchengwei/…

npm

www.npmjs.com/package/rea…

Features demonstrate

  • Custom styles
  • The custom Class

  • State management
  • The event processing

  • Dynamic rendering JSX

  • The form control

The installation

Install using NPM or YARN

We recommend using NPM or YARN for development. It is easy to debug in the development environment and can be packaged and deployed in the production environment to enjoy the benefits of the entire ecosystem and tool chain.

$ npm install react-form-create --save
Copy the code
$ yarn add react-form-create --save
Copy the code

Browser introduction

Import the file directly in the browser using the script tag, and use the global variable formCreate.

We are in the NPM release packagereact-form-create/distprovidesreact-form-create.es.js react-form-create.umd.js style.css. You can also pass 或 UNPKGDownload.

<script src="https://unpkg.com/react-form-create/dist/react-form-create.umd.js"></script>
Copy the code

Pay attention to

  1. Whether NPM or CDN is introduced, the Monaco-Editor needs to be introduced globally as a CDN.

    <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>Copy the code

  2. CDN introducing Ant-Design required introducing moment and Babel-standalone itself.

  3. The properties in dynamic Props are the same as all properties in the ANTD component, and there are more flexible property configurations that can use dynamic Props.

  4. FormInstance (formInstance properties), state(global state objects), dispatch(methods to update state), and antd(including antd) are globally accessible in dynamic Props, FormItemProps, and action Settings All components and global methods (Message, notification, etc.)

The sample

NPM into

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')
)
Copy the code

Browser introduction

<! 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>Copy the code

Component description

Form Designer

The sample

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} />
}
Copy the code

API

Props
parameter instructions type The default value
preview Designer previews action buttons boolean true
generateCode The designer generates code buttons boolean true
generateJson The designer generates Json buttons boolean true
uploadJson The designer imports the JSON button boolean true
clearable The designer empty button boolean true
methods

Ref lets you get the instance and call the instance method

The method name instructions parameter
getJson() Gets JSON data for the designer configuration –
setJson(value) Sets the configuration information for the designer Data obtained via getJson
clear() Empty designer
getTemplate(type) Gets ready-to-use code generated by the designer Type: ‘Component’ or ‘HTML’

Form Generator

The sample

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=" Form designer generated JSON" ref={ref} / >}Copy the code

API

Props
parameter instructions type The default value
widgetInfoJson Form JSON configuration data (JSON retrieved from the form designer) string –
formValue Form data (value retrieved from form generator) object –
methods

Ref lets you get the instance and call the instance method

The method name instructions parameter
getData() Get form data (return Promise) –
reset() Resetting form data –

Functional specifications

The remote data

Select items such as single box, multiple box, drop-down box, and cascade selector need to be generated using data. In this case, you can configure remote data.

Sets the remote method address and return value.

File upload

Enter the server upload address and parameter name.

Page life cycle management

React page renders life cycle function

Message, Notification, and Modal methods in ANTD are used globally

Antd. XXX can be used to call antD methods or components in component events, lifecycle, and dynamic Props

Subsequent planning

For those who use VUe-form-create, don’t worry. In the next couple of months, I will first transplant all the existing functions to vue version. Of course, rich text, charts and more common features will also be added.

At present, this is the first version of the detailed document still needs time to prepare. If you have better suggestions, requirements or any problems in the use, you can raise issues or add wechat to communicate with FuchengWei325795

Finally, if you feel good, please give a Star 😜😜😜.

(PS 🙂 currently free open source is the basic version, advanced version or advanced source version need to add wechat fuchengwei325795