React-form-js NPM

Input Bindings for React Form Base

HTML input bindings for react-form-base.

Installation

npm install --save react-form-js

Usage

For a more detailed information on core functionality of react-form-base, take a look at react-form-base demo. To see a sample usage of this package components, you may want to look at react-form-js components demo.

Example

import Form, {
  TextField,
  TextArea,
  Select,
  Checkbox,
  CheckboxGroup,
  RadioButtonGroup,
  RadioButton
} from 'react-form-js';

const ages = new Array(50).fill(10).map((n, i) => n + i);

export default class MyForm extends Form {
  render() {
    return (
      <div>
        <TextField {...this.$('fullName')} label="Full Name" />
        <TextArea {...this.$('description')} label="Description" />
        <Select {...this.$('age')} options={ages} includeBlank="Select..." />
        <CheckboxGroup {...this.$('favoriteColors')}>
          <Checkbox value="red" label="Red" />
          <Checkbox value="green" label="Green" />
          <Checkbox value="blue" label="Blue" />
        </CheckboxGroup>
        <RadioButtonGroup {...this.$('sex')}>
          <RadioButton value="male" label="Male" />
          <RadioButton value="female" label="Female" />
        </RadioButtonGroup>
        <Checkbox {...this.$('agree')} label="I Agree" />
      </div>
    );
  }
}

Component Props

All of the components receive value, onChange, error and name properties from react-form-base API. The latter is not directly used by components except for RadioButtonGroup component, where it is required for component to work.

Bellow are the specs for other properties that components work with.

`TextField`

Wraps <input type="text" /> HTML tag.

`TextArea`

Wraps <textarea /> HTML tag.

`Select`

Wraps <select /> HTML tag.

`Checkbox`

Wraps <input type="checkbox" /> HTML tag.

`CheckboxGroup`

Wraper around multiple Checkbox components. Has to include Checkbox'es as direct children. This component is designed for inputs whose value represents a collection of items that can be included in collection via checkboxes. For example, if your input has value of ['foo', 'bar'], Checkboxes underneath CheckboxGroup input with values of 'foo' and 'bar' will be checked. All other checkboxes will be unchecked.