# rc-form-dynamic

> `rc-form-dynamic` render form dynamic using form configurations, based on `rc-form` and `antd`.

Latest version **0.1.2** (published 2020-03-06) · 0 weekly downloads

## Install

```sh
npm install rc-form-dynamic
pnpm add rc-form-dynamic
yarn add rc-form-dynamic
bun add rc-form-dynamic
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2020-03-06 |
| First published | 2020-03-01 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 573.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | hubenlv |
| Keywords | react, rc-form, form, react-form, react-component, antd, form-dynamic, dynamic |

## Links

- npm: https://www.npmjs.com/package/rc-form-dynamic
- Repository: https://github.com/Derek-Hu/rc-form-dynamic
- Homepage: https://derek-hu.github.io/rc-form-dynamic
- Issues: https://github.com/Derek-Hu/rc-form-dynamic/issues
- npm.io page: https://npm.io/package/rc-form-dynamic

## Dependencies (5)

- [antd](https://npm.io/package/antd.md) ^3.26.12
- [moment](https://npm.io/package/moment.md) ^2.24.0
- [react-markdown](https://npm.io/package/react-markdown.md) ^4.3.1
- [babel-plugin-codegen](https://npm.io/package/babel-plugin-codegen.md) ^3.1.0
- [react-syntax-highlighter](https://npm.io/package/react-syntax-highlighter.md) ^12.2.1

## 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

- 0.1.2 (latest) — 2020-03-06
- 0.1.1 — 2020-03-01
- 0.1.0 — 2020-03-01

## README

`rc-form-dynamic` render form dynamic using form configurations, based on `rc-form` and `antd`.

```
npm install --save rc-form-dynamic
```

Demo: [https://derek-hu.github.io/rc-form-dynamic/](https://derek-hu.github.io/rc-form-dynamic/)

Form Configuration Example: 
```js
import DynamicForm from 'rc-form-dynamic';
import { Input, Form, Select, Button, Checkbox } from 'antd';

const { Option } = Select;

const settings = {
    props: {
        labelCol: { span: 5 },
        wrapperCol: { span: 12 }
    },
    fields: [{
        props: {
            label: 'Gender',
        },
        key: 'gender',
        decorator: {
            rules: [{ required: true, message: 'Please select your gender!' }],
        },
        component: [Select, {
            placeholder: "Select a option and change input text above",
            onChange: this.handleSelectChange,
            children: [
                <Option value="male" key="male">male</Option>,
                <Option value="female" key="female">female</Option>
            ]
        }],
    }, {
        key: 'remember',
        component: [Checkbox, {
            children: 'Remember me'
        }],
        decorator: {
            valuePropName: 'checked',
            initialValue: true,
        },
    }]
};

<DynamicForm 
    settings={settings} 
    onSubmit={this.handleSubmit} 
    render={[({ remember }, fields) => <Form.Item>
        {fields[remember]}
        <a className="login-form-forgot" href="">Forgot password</a>
    </Form.Item>]}>
    <Form.Item wrapperCol={{ span: 12, offset: 5 }}>
        <Button type="primary" htmlType="submit">Log in</Button>
    </Form.Item>
</DynamicForm>


```
After Render: 
```js
import React from 'react';
import { Form, Select, Button } from 'antd';

<Form labelCol={{ span: 5 }} wrapperCol={{ span: 12 }} onSubmit={this.handleSubmit}>
    <Form.Item label='Gender'>{
        getFieldDecorator('gender', {
            rules: [{ required: true, message: 'Please select your gender!' }],
        })(<Select
            placeholder="Select a option and change input text above"
            onChange={this.handleSelectChange}>
            <Option value="male" key="male">male</Option>
            <Option value="female" key="female">female</Option>
        </Select>)
    }</Form.Item>
    <Form.Item>
        {
            getFieldDecorator('remember', {
                valuePropName: 'checked',
                initialValue: true,
            })(<Checkbox>Remember me</Checkbox>)
        }
        <a className="login-form-forgot" href="">Forgot password</a>
    </Form.Item>
    <Form.Item wrapperCol={{ span: 12, offset: 5 }}>
        <Button type="primary" htmlType="submit">Log in</Button>
    </Form.Item>
</Form>
```
## Form Configuration
```js
{
    // props for <Form> Component: <Form ...{props}></Form>
    // e.g. https://ant.design/components/form/#Form
    props: {
        labelCol: { span: 5 },
        wrapperCol: { span: 12 },
        ...
    },
    // dynamic <Form.Item>
    fields: [{
        // props for <Form.Item> Component: <Form.Item ...{props}></Form.Item>
        // e.g. https://ant.design/components/form/#Form.Item
        props: {
            label: 'Gender',
            ...
        },
        // render form item using 'getFieldDecorator' from 'rc-form' component
        // e.g.
        // getFieldDecorator(key, decorator)(<Select {...props}>{children}</Checkbox>)
        key: 'gender',
        decorator: {
            rules: [{ required: true, message: 'Please select your gender!' }],
        },
        // component: Select,
        // component with props: [Select, props]
        component: [Select, {
            placeholder: "Select a option and change input text above",
            onChange: this.handleSelectChange,
            children: [
                <Option value="male" key="male">male</Option>,
                <Option value="female" key="female">female</Option>
            ]
        }],
    }]
}
```
## API
| Property       | Description             | Type                    |
| ---------- | ---------------- | ----------------------- |
| settings  | Form configuration | object                 |
| onSubmit | Alias for props in &lt;Form onSubmit&gt;     | Function(e:Event)                 |
| render  | Custom render &lt;Form.Item&gt; method        | Function(keys: Object, defaultRenderFormItems: Object, props: Object, configurations: Object) =&gt; Component \| Array<Function(keys: Object, defaultRenderFormItems: Object, props: Object, configurations: Object) => Component>                |
| onValuesChange |   Trigger when value updated     | Function(changedFields, allFields, formInstance) |
| onFieldsChange |   Trigger when field updated     | Function(changedValues, allValues, formInstance) |
| fields |    Control of form fields through state management    | { [name: string]: FieldData }  |

FieldData: https://ant.design/components/form/#FieldData

If you want to get ref after Form.create, you can use `wrappedComponentRef` provided by `rc-form`, [details can be viewed here](https://github.com/react-component/form#note-use-wrappedcomponentref-instead-of-withref-after-rc-form140).

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