@hivelocity/formify
``` 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 &&
Last updated 2 years ago by snippyboons .
MIT · Original npm · Tarball · package.json
$ cnpm install @hivelocity/formify 
SYNC missed versions from official npm registry.

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

Current Tags

  • 0.0.6                                ...           latest (2 years ago)

2 Versions

  • 0.0.6                                ...           2 years ago
  • 0.0.5                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 2
This Month 4
Last Day 0
Last Week 0
Last Month 2
Dependencies (2)
Dev Dependencies (7)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |