Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/manojpatra1991/react-context-form
A simple form library to handle all form requirements with React
https://github.com/manojpatra1991/react-context-form
forms react reactjs typescript
Last synced: 9 days ago
JSON representation
A simple form library to handle all form requirements with React
- Host: GitHub
- URL: https://github.com/manojpatra1991/react-context-form
- Owner: MANOJPATRA1991
- License: mit
- Created: 2022-03-14T22:38:57.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-07T10:08:21.000Z (over 2 years ago)
- Last Synced: 2025-01-23T18:17:52.427Z (10 days ago)
- Topics: forms, react, reactjs, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-context-perf-form
- Size: 43 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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;
errors: Partial>;
touched: Partial>;
handleChange: (key: string) => (value: any) => void;
handleTouched: (key: string) => (value: any) => void;
handleError: (key: string) => (value: any) => void;
setValues: (args: Partial>) => void;
resetValues: (args: Partial>) => void;
setErrors: (args: Partial>) => void;
setTouched: (args: Partial>) => void;
validateForm: (
values: any,
submit: (values: any, form: any) => void,
) => Promise;
}
```
## 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;
}
{(form: FormContextType) => (
<>
>
)}
```
**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 (
...
...
);
};
```
```typescript
const submitDetails = (values, form) => { ... };
const handleFormValueChange = ({
fieldName,
prevValue,
value: currentValue,
form,
}) => {
case 'firstName':
// Do something;
break;
case 'lastName':
// Do something;
break;
}
{(form: FormContextType) => (
<>
>
)}
```
### 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.