/react-form-js

HTML input bindings for react-form-base

Primary LanguageJavaScriptMIT LicenseMIT

Input Bindings for React Form Base

HTML input bindings for react-form-base.

build status npm version

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.

Prop Name Spec Description
label PropTypes.node A label to be rendered near the input.
labelPosition PropTypes.oneOf(['before', 'after'])
Defaults to 'before'		 Specifies whether label should be rendered before or after input element.
className PropTypes.string className for the root component element (which is a label).
inputClassName PropTypes.string className for internal input element.
errorClassName PropTypes.stringDefaults to 'error' className for internal error element (div), which is rendered if error is present.
...rest the rest of props are delegated to the nested input[type="text"] element.

TextArea

Wraps <textarea /> HTML tag.

Prop Name Spec Description
label PropTypes.node A label to be rendered near the textarea.
labelPosition PropTypes.oneOf(['before', 'after'])
Defaults to 'before'		 Specifies whether label should be rendered before or after textarea element.
className PropTypes.string className for the root component element (which is a label)
inputClassName PropTypes.string className for internal textarea element
errorClassName PropTypes.stringDefaults to 'error' className for internal error element (div), which is rendered if error is present.
...rest the rest of props are delegated to the nested textarea element.

Select

Wraps <select /> HTML tag.

Prop Name Spec Description
options 
PropTypes.arrayOf(
  PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
    PropTypes.shape({
      value: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number
      ]),
      label: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number
      ])
    })
  ])
)
 options to be rendered within internal select tag. If array of strings or integers is passed, it's values are used as options' texts and values. If array of objects is passed, each object should have value and label properties.
children PropTypes.node Can be used to render options manually. Overrides options prop.
includeBlank PropTypes.oneOfType([PropTypes.bool, PropTypes.string]) Used to render option with blank value. If true is passed, renders "None" as option's text. If string is passed, renders it as option's text.
label PropTypes.node A label to be rendered near the select element.
labelPosition PropTypes.oneOf(['before', 'after'])
Defaults to 'before'		 Specifies whether label should be rendered before or after select element.
className PropTypes.string className for the root component element (which is a label).
inputClassName PropTypes.string className for internal select element.
errorClassName PropTypes.stringDefaults to 'error' className for internal error element (div), which is rendered if error is present.
...rest the rest of props are delegated to the nested select element.

Checkbox

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

Prop Name Spec Description
label PropTypes.node A label to be rendered near the input.
labelPosition PropTypes.oneOf(['before', 'after'])
Defaults to 'after'		 Specifies whether label should be rendered before or after input element.
className PropTypes.string className for the root component element (which is a label).
inputClassName PropTypes.string className for internal input element.
errorClassName PropTypes.stringDefaults to 'error' className for internal error element (div), which is rendered if error is present.
...rest the rest of props are delegated to the nested input[type="checkbox"] element.

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.

Prop Name Spec Description
labelPosition PropTypes.oneOf(['before', 'after'])
Defaults to 'after'		 Passed to nested Checkbox components. Specifies whether label should be rendered before or after input element. Can be overriden by Checkbox.
className PropTypes.string className for the root component element.
checkboxClassName PropTypes.string Passed to nested Checkbox components as className property. Can be overriden by Checkbox.
inputClassName PropTypes.string Passed to nested Checkbox components property. Can be overriden by Checkbox.
errorClassName PropTypes.stringDefaults to 'error' className for internal error element (div), which is rendered if error is present.
children PropTypes.node Actual checkboxes should be passed as children as Checkbox components. All other (non-Checkbox) elements are rendered untouched.
...rest the rest of props is delegated to each of nested Checkbox component (and only to them).

RadioButtonGroup

Wraper around multiple RadioButton components. Has to include RadioButtons as direct children, and supplies name property to them.

Prop Name Spec Description
labelPosition PropTypes.oneOf(['before', 'after'])
Defaults to 'after'		 Passed to nested RadioButton components. Specifies whether label should be rendered before or after input element. Can be overriden by RadioButton.
className PropTypes.string className for the root component element.
radioClassName PropTypes.string Passed to nested RadioButton components as className property. Can be overriden by RadioButton.
inputClassName PropTypes.string Passed to nested RadioButton components property. Can be overriden by RadioButton.
errorClassName PropTypes.stringDefaults to 'error' className for internal error element (div), which is rendered if error is present.
children PropTypes.node Actual radio buttons should be passed as children as RadioButton components. All other (non-RadioButton) elements are rendered untouched.
...rest the rest of props is delegated to each of nested RadioButton component (and only to them).

RadioButton

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

Prop Name Spec Description
label PropTypes.node A label to be rendered near the input.
labelPosition PropTypes.oneOf(['before', 'after'])
Defaults to 'after'		 Specifies whether label should be rendered before or after input element.
className PropTypes.string className for the root component element (which is a label).
inputClassName PropTypes.string className for internal input element.
...rest the rest of props are delegated to the nested input[type="radio"] element.

Credits

Hugs and thanks to ogrechishkina for her support and building all of the CSS for demo application.

License

MIT