@new-knowledge/make-form

A higher-order component for making forms in React

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@new-knowledge/make-form
Minified + gzip package size for @new-knowledge/make-form in KB

Readme

makeForm - it makes a form, in React.

Main purposes:

  • Keep track of form state
  • Expose getter/setter methods to the form state
  • Allow developers to declaratively specify form behavior
  • Validate form fields
  • Mask user input

The FormFields object

The behavior of your form is determined by a defining a FormFields object. Each key is the name of a field in your form, each value is an object describing that field. For example, if we wanted a field named "age" with a default value of 20, our FormFields object would be created like so:

const ageFormFields ={
    age: {value: 20}
};

Options that can be passed in to makeForm include:

  • value - String or number. Initial value for the field. Defaults to empty string.
  • validator - Function. Receives input value and returns an error message. Returns empty string by default.
  • accept - Function. Receives input value and returns boolean. Return true to allow input. Returns true by default.
  • reject - Function. Opposite of accept, return true to block input.
  • maskInput - String. Formats user output. "(xxx) xxx-xxxx" turns "1234567890" into "(123) 456-7890".

The makeForm function

Pass your handwritten form component into the makeForm function, along with a FormFields object created by setupFields, and it will return your component decorated with the following functions as props:

  • setSubmit - Takes in your submit handler to be called after form validations pass. You should call it in componentWillMount to register your submit handler:
    componentWillMount() {
      this.props.setHandler(this.handleSubmit);    
    }
    
  • handleSubmit - If all fields are valid, this will call the handler you (hopefully) set when the component mounted.
  • resetForm - Resets the form to its initial state.
  • prefillForm - Takes in an object where the keys are field names and the values are field values, and prefills the form with those values. A form can only be prefilled once until it is reset.
  • setFields - Manually update the fields inside of the form state.
  • setFieldValue - Takes in a field name and new value.

The formContext object

The formContext object is provided as a prop to your form component, it contains methods which access the state of the form. These methods include:

  • getFields - The fields of the form state, which contain current values, error messages, etc.
  • getShowErrors - Is true after a submission is attempted, false after reset.
  • getHandleChange - Takes in field name, returns its change handler.
  • getValue - Takes in field name.
  • get Error - Take in field name.

By passing in a "name" prop and the form context, you can write a stateless input component that is connected to the form state:

```javascript const TextInput = ({name, formContext}) => { const { getHandleChange, getValue, getShowErrors, getError } = formContext; const handleChange = getHandleChange(name); const showErrors = getShowErrors(); const value = getValue(name); const error = getError(name);

return (
    <div>
        <input name={name} value={value} type={text}/>
        {showErrors && error &&
            <p>{error}</p>
        }
    </div>
)

}

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.