react-context-perf-form v1.4.2

react-context-perf-form

A minimal form library for React built with React Context and validation using Yup that provides better performance.

Available props

FormProvider

FastField

NOTE: Pass component specific props with spread operator

FormContextType

type FormContextType = {
  values: Record<string, any>;
  errors: Partial<Record<string, any>>;
  touched: Partial<Record<string, any>>;
  handleChange: (key: string) => (value: any) => void;
  handleTouched: (key: string) => (value: any) => void;
  handleError: (key: string) => (value: any) => void;
  setValues: (args: Partial<Record<string, any>>) => void;
  resetValues: (args: Partial<Record<string, any>>) => void;
  setErrors: (args: Partial<Record<string, any>>) => void;
  setTouched: (args: Partial<Record<string, any>>) => void;
  validateForm: (
    values: any,
    submit: (values: any, form: any) => void,
  ) => Promise<void>;
}

Using the form

Use case 1

For simple forms with single input fields such as text, select, radio, checkbox or any custom component with one input field, we can make use of FastField.

const submitDetails = (values, form) => { ... };

const onFormValueChange = ({
  fieldName,
  prevValue,
  value: currentValue,
  form,
}) => {
  case 'firstName':
    // Do something;
    break;
  case 'lastName':
    // Do something;
    break;
}

<FormProvider
  validateOnMount
  validateOnChange
  initialValues={{}}
  onSubmit={submitDetails}
  validations={validationSchema} // Yup validation schema
  onFormValueChange={onFormValueChange}
>
  {(form: FormContextType) => (
    <>
      <FastField
        name="firstName"
        component={SomeComponent} 
        {...props} // SomeComponent's props 
      />
      <FastField
        name="lastName"
        component={SomeComponent} 
        {...props} // SomeComponent's props 
      />
    </>
  )}
</FormProvider>

NOTE: FastField works only inside FormProvider.

Use case 2

For more sophisticated form fields, we might want to keep the logic for the field separate, in such cases we can have the following approach:

const ComplexField = () => {
  return (
    <View>
      ...
      <FastField ... />
      ...
    </View>
  );
};

const submitDetails = (values, form) => { ... };

const handleFormValueChange = ({
  fieldName,
  prevValue,
  value: currentValue,
  form,
}) => {
  case 'firstName':
    // Do something;
    break;
  case 'lastName':
    // Do something;
    break;
}

<FormProvider
  validateOnMount
  validateOnChange
  initialValues={{}}
  onSubmit={submitDetails}
  validations={validationSchema} // Yup validation schema
  handleFormValueChange={handleFormValueChange}
>
  {(form: FormContextType) => (
    <>
      <ComplexField />
    </>
  )}
</FormProvider>

Other use case

useField, useFormContext are also available for use cases that are not covered above and that require more complex business logic and implementation.

useField

const [field, meta, helpers] = useField({ name });

• field contains one property -

  • value - field’s value

• meta contains two properties -

  • error - field’s error message

  • touched - boolean

• helpers contains three properties -

  • setValue - used to set value of field(s)

  • setTouched - used to set touched status of field(s)

  • setError - used to set error on field(s)

useFormContext

This can be used to get all properties defined in FormContextType above.