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

import ReactOmniform from "react-omniform/src"

<ReactOmniform
    items={{
        email: "Email"
        password: "Password"
    }}
    updateValue={(key, value) => doSomething(key, value)}
    values={values}
    submitForm={() => doSomethingElse()}

/>

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 = (input) => {
    if (isNaN(Number(input))) 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 = ({ display, handleChange, value, error, name }) =>
    <TextField
      errorText={error}
      floatingLabelText={display}
      value={value}
      onChange={(e, value) => handleChange(value)}
      name={name}
    />;

const ButtonItem = () => <FlatButton label={"Submit"} type="submit"/>;