Skip to content

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

Notifications You must be signed in to change notification settings

nnur/wonder-form

Repository files navigation

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

Table of Contents

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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published