Formify

Formify makes an attempt to simplify forms in react and move away from redux-form.

Below is a simple example of how to use Formify

Declaration

const LoginForm = Formify({
    first: '',
    last: '',
    contacts: [{
        first: 'Barney',
        last: 'Calhoun'
    }]
}, ({error, fields}) => (
    <>
        <Error message={error} />
        <TextField {...fields.first} />
        <TextField {...fields.last} type="password" />
        {fields.contacts && fields.contacts.map((contact, index) => <TextField key={index} {...contact.first} />)}
        <FormButton mods={['green', 'padded', 'right']}>Login</FormButton>
    </>
));

Formify is a function that takes an object (fields) and a React Component then returns a Higher Order Component to properly pass the fields to the form.

Easy Implementations

<LoginForm onSubmit={async (fields) => {
    ...do whatever submit logic you need
}}>

If you have an errors go ahead and throw an error in this structure

{
    _error: '',
    fields: {
        first: '',
        last: ''
    }
}

if you throw 'This is an error' on the submit, that string will appear at the top of the form