Wonderform

WonderForm is a really lightweight form building and validation component for React.

Features

• No built in styles to overwrite
• Comes with validation for common inputs like date, email, etc
• Easily add custom validations or overwrite default validation

Demo

Table of Contents

• Installation
• Example
• Components

Installation

$ npm install wonder-form

Example

import React, {Component} from 'react'
import {render} from 'react-dom'
import { WonderForm, WonderField } from 'wonder-form'

class Demo extends Component {
  onSubmit(formContents) {
    console.log(formContents)
  }

  render() {
    return (
      <div>
        <WonderForm onSubmit={this.onSubmit.bind(this)}>
          <WonderField name='fullname' type='fullname' required errorMessage={"Error"} />
          <WonderField name='email' type='email' required errorMessage={"Error"} />
          <WonderField name='date' type='date' minDate='4/25/2017' errorMessage={"Error"} />
          <WonderField name='password' type='password' minLength={6} errorMessage={"Error"}/>
          <WonderField name='submit' type='submit' text='Create Account' />
        </WonderForm>
      </div>
    )
  }
}

render(<Demo/>, document.querySelector('#demo'))

Components

WonderField

You can import two components, a WonderForm and WonderField. WonderFields are nested inside WonderForms.

import { WonderForm, WonderField } from 'wonder-form'

WonderField props:

prop	type	description
*name	string	Must be a unique identifier for a field
*type	string	Must be one of the following: 'text', 'email', 'password', 'date', 'fullname', 'submit', 'custom'
placeholder	string	A normal placeholder
className	string	A class for the WonderField
errorMessage	string	An errorMessage to be displayed
label	string	A label that goes above the input
required	bool	Makes the field required
minDate	string	Must be of the format MM/DD/YYYY.
maxDate	string	Must be of the format MM/DD/YYYY.
maxLength	number	Minimum length of the field.
minLength	number	Maximum length of the field
buttonText	string	For the submit type WonderField

The following table shows which validation props will work for a certain type of input. All other props will be ignored or throw an error.

type	props
fullname	required, minLength, maxLength
text	required, minLength, maxLength
password	required, minLength, maxLength
date	required, minDate, maxDate
email	required
submit	buttonText

Creating a custom WonderField

A custom test must return undefined or an object like { type: 'errorName'}

  customTest(input, props) {
    let error;
    if (input !== 'custard') {
      error = {type: 'custard'};
    }
    return error;
  }

  <WonderField name='custom' type='custom' errorMessage='Error' test={this.customTest.bind(this)}/>

Styling a WonderField

A WonderField is composed of a label, input, and span. Pass in a class for the prop 'className' in a WonderField.

  <WonderField className="custom-class"></WonderField>

.custom-class {}
.custom-class label {}
.custom-class input {}
.custom-class span {}

WonderForm

WonderForm props:

prop	type	description
children	Array of Objects or an Object	Should be a list of WonderFields
onSubmit	function	Called whenever the WonderField with type='submit' is clicked. The field values and errors if there are any are passed in
onSuccess	function	Called when there are no errors in any field in the WonderForm
onError	function	Called if there are any errors. The field values with errors are passed in.

Scripts

• $ npm run test Runs the test suite