react-form-inputs

Synopsis

react-form-inputs is a baseline collection of pluggable input components for react-form.

Components

Name	Type	Browser Support	Details on Props	Valid initial values	Comments
Base	Internal	All browsers	Pass-through to input	String-like values	Shim for other components. Should not be used directly.
Boolean	Extended	All browsers	Optional checkedValue, uncheckedValue	true, false, "true", "false", 1, 0	Creates both a hidden input (uncheckedValue) and a checkbox input (checkedValue). Servers accepting POSTs must always use the last-encoded value.
Checkbox	Array	All browsers	Requires collection (object or array)	Array of String-like values	Creates a consistently-named checkbox input for each array item or key-value pair in collection. Value is always an array.
Color	Standard (HTML5)	Modern browsers	Pass-through to input	Hex color strings
Datalist	Array	Modern browsers	Pass-through to input, requires array collection	String-like values	Creates a datalist and accompanying input field. Collection must be an array of String-like values.
Date	Standard (HTML5)	Modern browsers	Pass-through to input	Date strings
Datetime	Standard (HTML5)	Modern browsers	Pass-through to input	Datetime-local strings	Uses datetime-local for greater browser compatibility.
Email	Standard (HTML5)	Modern browsers	Pass-through to input	Valid email strings
Hidden	Standard	All browsers	Pass-through to input	String-like values
Number	Extended	All browsers	Pass-through to input, pattern (regex string)	Numeric String-like values	Implemented using an enhanced "text" input. Does not allow entry of non-numeric characters. Decimals okay.
Password	Standard	All browsers	Pass-through to input	String-like values
Radio	Array	All browsers	Requires collection (object or array)	String-like values (within collection)	Creates a label and matching radio button for each array item or key-value pair in collection. Value is always a single value contained within collection.
Range	Standard (HTML5)	Modern browsers	Pass-through to input, min, max, step	Numeric String-like values
Search	Standard (HTML5)	Modern browsers	Pass-through to input	String-like values
Select	Array	All browsers	Requires collection (object or array), optional multiple (boolean)	String-like values (within collection)	Creates a select or multi-select with an option for each array item or key-value pair in collection. If props.multiple=true, value is always an array of value(s) from collection, else value is a single , non-array value from collection.
Text	Standard	All browsers	Pass-through to input	String-like values	Standard, work-horse input component
Textarea	Standard	All browsers	Pass-through to textarea	String-like values
Time	Standard (HTML5)	Modern browsers	Pass-through to input	String time (HH:MM) values

A note on array-type (collection) components

Any array-type component accepting a collection consisting of an object or array will behave similarly.

If collection is an array of values: those values will be used for both the visible label and underlying "value" used for selection/form submission.

If collection is an object (key-value pairs): object keys will be visible to users, object values will be used as the underlying "value" used for selection/form submission.

Tips

• To reduce over-the-wire payload, only require specific components:

  var Text = require('react-form-inputs/text');

Developing

Install gulp, dependencies:

npm install -g gulp
npm install

Build it!:

#To build once:
gulp build

#To watch and rebuild on changes:
gulp watch

Link dependent project to ./dist/:

#Within dependent project directory...
npm link ~/path-to-react-form-inputs/dist/

Contributing

• Fork the project.
• Create a descriptively-named branch for your changes. (fix_whatever, add_this)
• Commit your change.
• Add appropriate documentation, test coverage.
• Test with "npm test" (requires jest-cli).
• Issue a pull request for your branch.

License

react-form-inputs is released under the MIT License.