formerly

#React Form Thing

A library for writing dynamic React forms with ease.

formerly gives you a very flexible and idiomatic way to structure your forms

<Form ref='form' onSubmit={this.onSubmit}>
        
  <label>Your name</label>
  <Input name='myName' value='nicolas cage' />
  
  <label>Your best friend name</label>
  <Input name='bestFriend' shouldEqual='Obama' value='None' />
  
  <label>Are you older than 18?</label>
  <Input type='checkbox' name='is18Plus'/>
  
  <label>Your usual password</label>
  <Input type='password' name='password' />
  
  <label>Repeat your password</label>
  <Input type='password' name='repeatPassword' />
  
  <!-- zero boilerplate way to bind a random component to any input anywhere in your form -->
  <OnValue in={['password', 'repeatPassword']} test={({password, repeatPassword}) => password === repeatPassword}>
    <!-- when using a custom component, "value" is passed as "props" -->
    Congratulations, you can type
  </OnValue>
  
  <Entity name='addresses'>
    
    <Entity name='home'>
      <label>Home address</label>
      <Input name='streetAddress' value='1600 Pennsylvania Ave NW, Washington, DC 20500, United States' />
      <Input name='reference' value='Largest house in the block' />
    </Entity>
    
    <Entity name='hideSpot'>
      <label>Secret hide spot</label>
      <Input name='streetAddress' placeholder='Please fill this one' required />
      
      <OnError in='streetAddress'>
        You really should fill this one
      </OnError>
      
      <Input name='reference' />
    </Entity>
    
  </Entity>
  
  <label>Emails</label>
  <Entity name='emails'>
      <Input name={0} type='email' value='[e-mail]' />
  </Entity>
  
  <label>Favorite music</label>
  <Select name='music'>
    <option>Country</option>
    <option>Rap</option>
  </Select>
  
  <button type='submit'>Submit</button>
</Form>

and a clean API

import React, {createClass} from 'react'
import {render} from 'react-dom'
import {Form, Select, OnError, OnValue, Input, Entity} from 'react-form-thing'

const NewsletterForm = createClass({
  onSubmit (errors, {is18Plus, emails}) {
    if (errors) return die(errors)
    
    const url = is18Plus ? 'http://adult-site.com' : 'http://disney.com'
    
    fetch(url, {method: 'POST', body: emails})
      .then(() => alert('Check your SPAM box'))
      .then(() => this.refs.form.reset())
  },
  serialize () {
    return this.refs.form.serialize()
  }
  render () {
    return (
      // [ ... ]
    )
  }
})

const form = render(<NewsletterForm />, document.body)

assert.deepEqual(form.serialize(), {
  myName: 'nicolas cage',
  bestFriend: 'None',
  is18Plus: false,
  addresses: {
    home: {
      streetAddress: '1600 Pennsylvania Ave NW, Washington, DC 20500, United States',
      reference: 'Largest house in the block'
    }
  },
  emails: ['[e-mail]'],
  music: 'Country'
})

function die(errors) {
  if (errors.hideSpot) {
    return alert('You forgot some required fields')
  } 
  
  if (errors.bestFriend) {
    // bestFriend !== 'Obama'
    return fetch('https://nsa.gov', {method: 'POST', body})
      .then(() => location.href = 'http://www.wikihow.com/Deal-with-Being-in-Prison')
  }
  
  alert("This is why we can't have nice things")
}