Dead simple form components and reducers for shasta
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
docs
src
test
.gitignore
.travis.yml
LICENSE
README.md
book.json
package.json

README.md

shasta-forms NPM version Downloads Build Status

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