control-form
React component for controlled forms.
Install
npm install control-formExample
import { ControlForm } from "control-form";
export default props => (
<ControlForm
initialState={{ name: "", selectKey: "", radioKey: "", checkboxKey: false }}
onSubmit={formState => console.log(`Hello, ${formState.name}`)}
>
{({ wire, state }) => {
<div>
<div>
<label>Text Input</label>
<input type="text" {...wire("name")} />
</div>
<div>
<label>Select options</label>
<select {...wire("selectKey")}>
<option />
<option value="first">First</option>
<option value="second">Second</option>
</select>
</div>
<div>
<label>Yes</label>
<input type="radio" value="yes" {...wire.radio("radioKey", "yes")} />
<label>No</label>
<input type="radio" value="no" {...wire.radio("radioKey", "no")} />
</div>
<div>
<label>Checkbox</label>
<input type="checkbox" {...wire.checkbox("checkboxKey")} />
</div>
<button disabled={state.name.length === 0 || state.checkboxKey}>
Submit
</button>
</div>;
}}
</ControlForm>
);ControlForm
initialState
Define the data keys and types used in the form. This state will also be used when resetting the form.
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, [wiring], [valueProp])
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")} />wiring & valueProp are optional parameters for how controlled components are connected. Here's an example using a checkbox:
<input type="checkbox" {...wire("key", wiring.checked, "checked")} />This makes it easy to wire up custom components.
<CustomInput {...wire("key", e => e.path.to.event.data, "data")} />wire.checkbox(key)
Alias for wiring up checkboxes
<input type="checkbox" {...wire.checked("key")} />wire.radio(key, conditionalValue)
Alias for wiring up radio buttons. If the form's state.key equals the conditionalValue the radio checked will be true.
<input type="radio" value="someValue" {...wire.radio("key", "someValue")} />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
