node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


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
  <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 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
      <Input name='reference' />
  <Entity name='emails'>
      <Input name={0} type='email' value='' />
  <label>Favorite music</label>
  <Select name='music'>
  <button type='submit'>Submit</button>

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 ? '' : ''
    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: [''],
  music: 'Country'
function die(errors) {
  if (errors.hideSpot) {
    return alert('You forgot some required fields')
  if (errors.bestFriend) {
    // bestFriend !== 'Obama' 
    return fetch('', {method: 'POST', body})
      .then(() => location.href = '')
  alert("This is why we can't have nice things")