shasta-forms

Form views and components for Shasta

Usage no npm install needed!

<script type="module">
  import shastaForms from 'https://cdn.skypack.dev/shasta-forms';
</script>

README

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