@bluecateng/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.

Installation

npm i -S @bluecateng/auto-forms

Creating Connected Components

Input

import connect from '@bluecateng/auto-forms';
import ComponentToConnect from '...';

//Use the connect function to map the state of the component to the state of the auto-wired form:
const AutoWiredTextInput = connect(ComponentToConnect, ({value, error, setValue}) => ({
	value,
	error,
	onChange: useCallback(({target: {value}}) => setValue(value), [setValue]),
}));

export default AutoWiredTextInput;

Submit

import React from 'react';
import PropTypes from 'prop-types';
import {useFormState} from '@bluecateng/auto-forms';

const AutoWiredSubmit = ({...props}) => {
	//use useFormState to hook into the auto wired forms state:
	const {hasErrors} = useFormState();
	return <input type="submit" disabled={hasErrors()} />;
};

export default AutoWiredSubmit;

Creating a form

import {Form, validateNotEmpty} from '@bluecateng/auto-forms';
import {AutoWiredTextInput} from '...';
import {AutoWiredSubmit} from '...';
import {sendData} from '...';

const FormExample = () => {
	const initialValues = {
		name: 'example',
	};

	const rules = {
		name: validateNotEmpty('Name is required'),
	};

	return (
		<Form
			initialValues={initialValues}
			rules={rules}
			onSubmit={(values) => {
				sendData(values.name);
			}}>
			<AutoWiredTextInput name="name" />
			<AutoWiredSubmit />
		</Form>
	);
};

export default FormExample;

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