control-form

React component for controlled forms.

Install

npm install control-form

Example

import { ControlForm } from "control-form";

export default props => (
  <ControlForm onSubmit={formState => console.log(`Hello, ${formState.name}`)}>
    {({ wire, state }) => {
      const exampleRadio = wire.radio("radioKey", "yes");
      return (
        <div>
          <div>
            <label>Text Input</label>
            <input type="text" {...wire("name", "")} />
          </div>

          <div>
            <label>Select options</label>
            <select {...wire("selectKey", "first")}>
              <option />
              <option value="first">First</option>
              <option value="second">Second</option>
            </select>
          </div>

          <div>
            <label>Yes</label>
            <input type="radio" value="yes" {...exampleRadio("yes")} />
            <label>No</label>
            <input type="radio" value="no" {...exampleRadio("no")} />
          </div>

          <div>
            <label>Checkbox</label>
            <input type="checkbox" {...wire.checkbox("checkboxKey", true)} />
          </div>

          <button disabled={state.name.length === 0 || state.checkboxKey}>
            Submit
          </button>
        </div>
      );
    }}
  </ControlForm>
);

ControlForm

onSubmit

Callback receiving the form's state when a submit event occurs.

onChange

Callback receiving the form's state when a change event occurs.

onReset

Callback receiving the form's state when a reset event occurs.

children

Function receiving wire, wiring and state and returning form elements.

wire(key, initialValue, [wiring], [valueKey], [transformValue])

Returns a callback with onChange & value props to pass to connected components. The key needs match a key present in the initialState prop.

<input type="text" {...wire("key", "")} />

wire.number(key, initialValue, [...args])

Alias for wiring up number inputs.

<input type="text" {...wire.number("key", 0)} />

...args are passed to wire when called.

wire.checkbox(key, initialValue)

Alias for wiring up checkboxes

<input type="checkbox" {...wire.checkbox("key", true)} />

wire.radio(key, initialValue) => (conditionalValue)

Alias for wiring up radio buttons.

const exampleRadio = wire.radio("key", "initialValue");
<input
  type="radio"
  value="initialValue"
  {...exampleRadio("conditionalValue")}
/>;

wiring

Functions to map onChange event data to state data.

• input: e => e.target.value
• checked: e => e.target.checked
• value: e => e

state

Read only copy of the form's current state. This is useful for displaying text or disabling form elements based on state.

<input
  type="text"
  {...wire("key", "")}
  disabled={state.otherStateKey.length === 0}
/>

...props

Remaining props will be passed directly to the underlying form