npm install hoth-formhoth-form
=========
Another way to work with forms in React. See [demo].
Install it
----------
npm i -S hoth-form
Test it
-------
git clone https://github.com/saintcrawler/hoth-form && cd hoth-form
npm i && npm test
Use it
------
Import or require hoth-form module. Currently, it exposes these items:
1. Form - React component, which will render your form.
2. Field - React component, which will render your form fields. It is not the only way to render form fields, but you can use it as default.
3. config - Configuration object, which you may tune as you wish.
Make a config object:
``javascriptinitValue
const fields = {
username: '', // init with default value
password: { // or object
value: '123', // or , or nothing (empty string will be used)fields
className: 'password-field', // almost everything will be injected on render
validation: { // except for some non-standard props...
required: true // they will not get to the HTML form controls (input, select, etc.)...
} // only to the custom components (Field, etc.)
},
transport: {
// for multi-values fields you must specify prop with an array of value names or with object with value named keys. fields
fields: ['feet', 'car', 'bicycle'],
// value should be a string matching one of the names (for radio-buttons or selects with single selection mode) or an array of strings (for checkboxes or selects with multiple selection) `
value: ['feet', 'bicycle']
},
cars: {
fields: {
ford: {},
mazda: {},
audi: {disabled: true},
},
value: []
},
agree: false // single checkbox or radio should be init with true/false value
};
Use
component instead of html tag. And any child component with name prop, matching against fields keys, will be injected with corresponding props. For example:`javascript
import {Form, Field} from 'hoth-form'// optional
function onChange(fields, target) {
// is called AFTER changing a value, so
fields are up-to-date
// target is React component, that was changed
// return either object with keys matching form fields or empty object or undefined
return {
password: {disabled: !!fields.username.value}
}
}// optional
function validate(fields) {
// return either object with keys matching form fields
// plus special non-field-errors field (defaults to 'nonFieldErrors',
// can be changed in the config object by setting 'nonFieldErrorsKey')
// or empty object or undefined
// Each object key must be a string or an array of strings
const errors = {};
if (!fields.agree.value) errors.agree = 'You must accept something';
if (fields.username.value.length < 3) errors.username = [
'You must enter a valid username',
'Username must be at least 3 characters long'
];
return errors;
}
// required
function onSubmit(form) {
console.log('submitting form', form);
}
function isSubmitEnabled(form) {
return {disabled: form.errors}
}
const moreErrors = {
// This will be injected into fields with corresponding
name prop.
// You can use this, for example, to provide server validation errors from another redux state slice.
// These errors do not affect form errors flag.
username: 'Already taken'
};//...somewhere in render function...
fields={fields} // required
onSubmit={onSubmit} // required
onChange={onChange} // optional
validate={validate} // optional
moreErrors={moreErrors} // optional
>
// use
// or use html form tags
`Structure of a field
--------------------
For single values:
- initialValue
- value
- dirty (true/false)
- active (true/false)
- errors ([] or null)
- checked (true/false) - for radio and checkboxes
For multiple values:
- fields
- subField1
- checked (true/false)
- subField2
- subField3
- initialValue ([])
- value ([])
- dirty
- active
- errors
Single vs Multiple value
------------------------
Single can be:
-like inputs,