# react-context-perf-form

> Basic react form builder that is optimised to be blazing fast

Latest version **1.4.2** (published 2022-07-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-context-perf-form
pnpm add react-context-perf-form
yarn add react-context-perf-form
bun add react-context-perf-form
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.2 |
| Published | 2022-07-07 |
| First published | 2022-03-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 51.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | manojpatra1991 |
| Keywords | form, forms, react, hooks, react hooks, context, validation |

## Links

- npm: https://www.npmjs.com/package/react-context-perf-form
- Repository: https://github.com/MANOJPATRA1991/react-context-form
- Homepage: https://github.com/MANOJPATRA1991/react-context-form#readme
- Issues: https://github.com/MANOJPATRA1991/react-context-form/issues
- npm.io page: https://npm.io/package/react-context-perf-form

## Dependencies (2)

- [yup](https://npm.io/package/yup.md) 0.31.1
- [@types/yup](https://npm.io/package/@types/yup.md) ^0.29.13

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.4.2 (latest) — 2022-07-07
- 1.3.2 — 2022-07-07
- 1.2.2 — 2022-07-07
- 1.1.2 — 2022-04-08
- 1.1.1 — 2022-04-08
- 1.1.0 — 2022-04-08
- 1.0.4 — 2022-03-18
- 1.0.3 — 2022-03-15
- 1.0.2 — 2022-03-15
- 1.0.1 — 2022-03-14
- 1.0.0 — 2022-03-14

## README

# 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

| Name | Type | Default | Description |
| - | - | - | - |
| validateOnMount | boolean | `false` | Determine if the form should run validation on mount |
| validateOnChange | boolean | `false` | Determine if a field should be validated on change in value |
| initialTouched | boolean | `false` | Determine if fields will be touched initially |
| initialValues | object | `{}` | Initial values for the form |
| onSubmit | function |  | `(values, form: FormContextType) => {}` Callback function to be called when the form is submitted |
| validations | object | `{}` | Yup Object containing the validation schema for the form |
| onFormValueChange | function |  | `({ fieldName: string; prevValue: any; value: any; form: FormContextType }) => {}` Callback function to be called when a field value changes |
enableReinitialize | boolean | | Determines if reinitialisation is required on initialValue change

### FastField

| Name | Type | Description |
| - | - | - |
| name | string | Name of the field |
| component | JSX.Element | Component to render for a field |

**NOTE**: Pass component specific props with spread operator

## `FormContextType`

```typescript
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`.

```typescript
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:

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

```typescript
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

```typescript
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.

---
_Source: https://npm.io/package/react-context-perf-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._