shasta-forms

This is a work in progress - There is sparse documentation, no tests, and it's not on npm. Use at your own risk while we finish up!

shasta-forms provides a wrapper around redux-form which provides a few nice features:

• Write jsx form fields with attributes, no outside metadata
• Validation via redux-form-schema
• Automatic error reporting
• Works with shasta/immutable.js OOTB

see redux-form-schema and validator.js for validation documentation; pass directly into Field jsx

Install

npm install shasta-forms

Example

import React from 'react'
import { Component } from 'shasta'
import { Form, Field } from 'shasta-forms'

// standard Component
class PersonForm extends Component {
  handleSubmit (data) {
    // an action that saves a person
    this.actions.people.save(data)
    // do something after
  }
  render () {
    return (
      <div>
        <Form
          name='person'
          className='ui form'
          onFormSubmit={this.handleSubmit}>
          {/* define a Field, with options like `required` */}
          <Field
            name='name'
            required />
          <Field name='location' required placeholder='San Francisco, CA' />
          <div className='field'>
            <label>Images</label>
            <Field name='smallImage' placeholder='//me.com/smallImage.png' noLabel />
            <Field name='largeImage' placeholder='//me.com/largeImage.png' noLabel />
          </div>
          <div className='six wide field'>
            {/* type='email' gives you email validation */}
            <Field name='email' type='email' />
            <Field name='twitter' />
            <Field name='facebook' />
            <Field name='instagram' />
          </div>
          <button type='submit' className='ui button'>Submit</button>
        </Form>
      </div>
    )
  }
}

// connect the Component
export default Component.connect(PersonForm, require('core/actions'))

Coming soon

• Custom extended Field types
• React Native support