Auto-Forms ·

Auto-forms is a library that helps you quickly create "auto-wired" forms in React. Auto-Forms is a small library which ensures the least amount of performance hit possible, and makes it easy to create forms that already have the values, validation functions, error messages, and submit functions all work seamlessly together.

⚠️ Notice: the contents of this repository are now part of the Pelagos monorepo, this repository is now archived.

Getting Started

npm install @bluecateng/auto-forms

Creating Connected Components

Input

importconnectfrom'@bluecateng/auto-forms';importComponentToConnectfrom'...';//Use the connect function to map the state of the component to the state of the auto-wired form:constAutoWiredTextInput=connect(ComponentToConnect,({value, error, setValue})=>({
value,
error,onChange: useCallback(({target: {value}})=>setValue(value),[setValue]),}));exportdefaultAutoWiredTextInput;

Submit

importReactfrom'react';importPropTypesfrom'prop-types';import{useFormState}from'@bluecateng/auto-forms';constAutoWiredSubmit=({...props})=>{//use useFormState to hook into the auto wired forms state:const{hasErrors}=useFormState();return<inputtype="submit"disabled={hasErrors()}/>;};exportdefaultAutoWiredSubmit;

Creating a form

import{Form,validateNotEmpty}from'@bluecateng/auto-forms';import{AutoWiredTextInput}from'...';import{AutoWiredSubmit}from'...';import{sendData}from'...';constFormExample=()=>{constinitialValues={name: 'example',};construles={name: validateNotEmpty('Name is required'),};return(<ForminitialValues={initialValues}rules={rules}onSubmit={(values)=>{sendData(values.name);}}><AutoWiredTextInputname="name"/><AutoWiredSubmit/></Form>);};exportdefaultFormExample;

Documentation

useFormField- Returns the field by value as well as a function to edit the field outside of the input, similar to hooks in React.

useFormState- Returns an object containing the entire state of form.

validateAnd- Validates an array of functions, only returns null if all validations rules pass.

validateMatches- Validates a field against a regex pattern.

validateNotEmpty-Validates a field to ensure it is not empty.

validateNotMatches-Validates a field to ensure it does NOT match a regex pattern.

License

ISC