control-form
React component for controlled forms.
Install
npm install control-form
Example
; <ControlForm onSubmit= console> { const exampleRadio = wire; return <div> <div> <label>Text Input</label> <input type="text" ... /> </div> <div> <label>Select options</label> <select ...> <option /> <option value="first">First</option> <option value="second">Second</option> </select> </div> <div> <label>Yes</label> <input type="radio" value="yes" ... /> <label>No</label> <input type="radio" value="no" ... /> </div> <div> <label>Checkbox</label> <input type="checkbox" ...wire /> </div> <button disabled=statenamelength === 0 || statecheckboxKey> 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.number(key, initialValue, [...args])
Alias for wiring up number inputs.
<input type="text" ...wire />
...args
are passed to wire
when called.
wire.checkbox(key, initialValue)
Alias for wiring up checkboxes
<input type="checkbox" ...wire />
wire.radio(key, initialValue) => (conditionalValue)
Alias for wiring up radio buttons.
const exampleRadio = wire;<input type="radio" value="initialValue" .../>;
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" ... disabled=stateotherStateKeylength === 0/>
...props
Remaining props will be passed directly to the underlying form