React Form-ula User Guide
Inspired by this formik, this library exists to improve the performance of forms by reducing the number of component re-renders. If you have forms that have a large number of input fields then each time a field changes (e.g. single key stroke) every input component gets re-rendered. This can lead to key lag.
React Form-ula is different, it uses react-cache to identify which components have changed and only renders those components.
Install
npm install --save @kuzmycz/react-form-ula
Usage
Simple setup, no initial data, no validations, just works!
import { FormProvider, Form, Field } from 'kuzmycz@react-form-ula';
const MyForm = () => {
const submitHandler = (values: any) => alert("Submitted the following " + values);
return(
<Form onSubmit={submitHandler}>
<div className={'element-layout'}>
<label>Name:
<Field type='text' name={`name`} />
</label>
<label>Name:
<Field type='text' name={`age`} />
</label>
<div>Gender</div>
<label><Field name={`gender`} value='male' type={'radio'} /> Male</label>
<label><Field name={`gender`} value='female' type={'radio'} /> Female</label>
<label><Field name={`gender`} value='other' type={'radio'} /> Other</label>
</div>
<button type='submit'>Submit</button>
</Form>);
};
Example with initial data.
import { FormProvider, Form, Field } from 'kuzmycz@react-form-ula';
const INITIAL_DATA = {name:'', age: '42', gender:'female'};
const MyForm = () => {
const submitHandler = (values: any) => alert("Submitted the following " + values);
return(
<Form initialValues={INITIAL_DATA} onSubmit={submitHandler}>
<div className={'element-layout'}>
<label>Name:
<Field type='text' name={`name`} />
</label>
<label>Name:
<Field type='text' name={`age`} />
</label>
<div>Gender</div>
<label><Field name={`gender`} value='male' type={'radio'} /> Male</label>
<label><Field name={`gender`} value='female' type={'radio'} /> Female</label>
<label><Field name={`gender`} value='other' type={'radio'} /> Other</label>
</div>
<button type='submit'>Submit</button>
</Form>);
};
Example with validation data.
import { FormProvider, Form, Field, Error } from 'kuzmycz@react-form-ula';
const INITIAL_DATA = {name:'', age: '42', gender:'female'};
const isEmpty = (value) => value === undefined || value.trim().length() < 1;
const validator = (values) => {
// you can use Nope or Yup
// return undefined for no errors or a structured object with errors
let errors = {};
if (isEmpty(values.name)) {
errors['name'] = "Name is required";
}
if (isEmpty(values.age)) {
errors['age'] = "Age is required";
} else if (Number(values.age) < 18 || values.name.trim().length < 1) {
errors['age'] = "Age has to be greater than 17";
}
return (errors === {}) ? undefined : errors;
}
const MyForm = () => {
const submitHandler = (values: any) => alert("Submitted the following " + values);
return(
<Form initialValues={INITIAL_DATA} validator={validator} onSubmit={submitHandler}>
<div className={'element-layout'}>
<div className={'field'}>
<label>Name:
<Field type='text' name={`name`} />
</label>
<Error name={'name'}/>
</div>
<div className={'field'}>
<label>Name:
<Field type='text' name={`age`} />
</label>
<Error name={'age'}/>
</div>
<div>Gender</div>
<label><Field name={`gender`} value='male' type={'radio'} /> Male</label>
<label><Field name={`gender`} value='female' type={'radio'} /> Female</label>
<label><Field name={`gender`} value='other' type={'radio'} /> Other</label>
</div>
<button type='submit'>Submit</button>
</Form>);
};
Or perhaps you would want your own input type
import { useField } from 'kuzmycz@react-form-ula';
const TextField = ({name, label, ...rest}) => {
const fieldContext = useField({...rest, name});
const {error, touched} = fieldContext.errorProps;
return(
<div className='field'>
{label && <label className='field-label'>{label}</label>}
<input {...fieldContext.fieldProps}/>
{touched && error && <div className='field-error'>{error}</div>}
</div>
);
};
useFieldValue
The hook (useFieldValue) allows a form field's value to be changed. This is useful for form fields where their values are derived from other fields or inputs. Note: useFieldValue is a short-cut for using useCacheValue.
Why would you want to do this? Typically, you would use this if you have a computed value that you want added to the form so that it can be submitted later to a server.
import { useFieldValue } from 'kuzmycz@react-form-ula';
const SomeComponent = ({length, width}) => {
const [area, setArea] = useFieldValue(area);
useEffect(() => {
setArea(length * width);
}, [length, width])
return(
<div className='field'>
{label && <label className='field-label'>Area</label>}
{area}
{touched && error && <div className='field-error'>{error}</div>}
</div>
);
};