React Omniform
The react form component, for every possible need.
Installation
npm install --save react-omniform
or
yarn add react-omniform
Note that there is a yarn.lock file in this project.
Usage
The react omniform does not maintain its own internal state, values for form elements must be explicitly passed in as a prop.
Note: Build step is currently broken, you must import the raw files and run babel on them yourself
<ReactOmniform items= email: "Email" password: "Password" updateValue= values=values submitForm= />
Example
An example with redux is in the test folder, and can be opened with npm run serve
. This starts an auto updating dev server on port 8080.
Documentation
items
items : { [key: string]: string }
A map of the ids of form elements to their display names.
updateValue
updateValue : (key: string, value: string) -> void
A function to call when a form element is updated
submitForm
submitForm : () -> void
A function to call when the form is submitted, either by pressing the submit button, or by hitting enter while in the form.
values
values : { [key: string]: string }
A map of ids of form elements to the value of that form element
customValidation
customValidation : { [key: string]: (input: string, inputs: { [key: string]: string }) -> void }
A map of form ids to functions. Each function is called once when the form is updated, with the value of the its form field, and the values of all form fields as its parameters. If the form input is invalid, the validator function should throw an error.
Usage:
const isNumber = { if throw Error"Input must be a valid number"}
types
types : { [key: string]: string }
A map of form ids to form element types. For custom form elements, this value is passed in as a prop.
FormItem
A react component to render, the props are as follows
{
display: string,
handleChange: (string: value) -> void,
value: string,
error: ?string,
name: string
}
ButtonItem
A react component which is passed no props, and must render a button
Usage with material-ui
Custom components to pass in which work with the material-ui library.
const FormItem = <TextField errorText=error floatingLabelText=display value=value onChange= name=name />; const ButtonItem = <FlatButton label="Submit" type="submit"/>;