3 ways to create form

There are 3 ways to create a Bee Form: using createForm() method, using connectForm() method (HoC), and using <Form/> component. Each with its own pros and cons, so you may choose the best that suit your needs.

1. The createForm() method

The createForm() method is the most verbose way among the 3, and it uses forceUpdate() which some of you may not like, however, it provides full control over the created form, and also demonstrate the "light-weight" nature of the core form engine.

import React, {Component} from 'react';
import {createForm} from "bee-form-react";
import {required} from "bee-form-validators";

export default class CreateForm extends Component {

    constructor(props, context) {
        super(props, context);

        this.form = createForm({
            "name": [required],
        });

        this.form.onChange(() => this.forceUpdate());
    }

    render() {
        const fv = this.form.createView();

        return (
            <div className="sample-create-form">

                <div>
                    <input
                        {... fv.bind("name")}
                        placeholder="Your name..."
                    />
                </div>

                <div>
                    Hello {fv.getValue("name") || "there"}.
                </div>
            </div>
        );
    }
}

Hello there.

2. The connectForm() method

The connectForm() method is more succinct, and it resembles the HoC way that many people are familiar with, so you would probably like to use it the most

import React, {Component} from 'react';
import {connectForm} from "bee-form-react";
import {required} from "bee-form-validators";

const formConfig = {
    "name": [required],
};

const ConnectForm = ({fv}) => (
    <div className="sample-create-form">

        <div>
            <input
                {... fv.bind("name")}
                placeholder="Your name..."
            />
        </div>

        <div>
            Hello {fv.getValue("name") || "there"}.
        </div>
    </div>
);

export default connectForm(ConnectForm, formConfig);

Hello there.

3. The Form component method

The <Form/> component method is both succinct and pure React. You can choose to use render props or children, whichever suits your taste.

import React, {Component} from 'react';
import {Form} from "bee-form-react";
import {required} from "bee-form-validators";

const formConfig = {
    "name": [required],
};

export default () => (
    <Form
        config={formConfig}
        render={(fv) => (
            <div className="sample-create-form">

                <div>
                    <input
                        {... fv.bind("name")}
                        placeholder="Your name..."
                    />
                </div>

                <div>
                    Hello {fv.getValue("name") || "there"}.
                </div>
            </div>
        )}
    />
);

Hello there.

One last thing...

Please note that there is also a sync-form library which has almost identical API, but with a different/more light-weight way to create form (view). You may want to look at it if you have problem using Bee-form create-form methods.