You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[use-ajv-form](https://github.com/agjs/use-ajv-form) is a custom React Hook enabling powerful and efficient form logic and validation using [Ajv JSON Schema Validator](https://ajv.js.org/). It offers an elegant solution to integrate state and validation into any form, independent of the form's design and presentation.
9
+
[use-ajv-form](https://github.com/agjs/use-ajv-form) is a custom React Hook enabling powerful and efficient form logic and validation using [Ajv JSON Schema Validator](https://ajv.js.org/). Designed for ease of integration, it offers an elegant solution to incorporate state and validation into any form, independent of the form's design and presentation.
10
10
11
-
This library is a part of the toolkit used extensively on [Programmer Network](https://programmer.network/). It is an open-source project, fostered by our vibrant community on the [Programmer Network Twitch Channel](https://twitch.tv/programmer_network).
11
+
This library, a part of the toolkit used extensively on [Programmer Network](https://programmer.network/), is fostered by our vibrant community on the [Programmer Network Twitch Channel](https://twitch.tv/programmer_network).
12
12
13
13
## Why Use React AJV Schema?
14
14
15
-
-**Streamlined Form Validation**: Uses Ajv to automate form validation against the [JSON Schema Specification](https://json-schema.org/specification.html), significantly reducing the need for manual validation.
-**Design Agnostic**: Offers full freedom in how you structure, style, and handle your forms.
15
+
-**Streamlined Form Validation**: Automates form validation against the [JSON Schema Specification](https://json-schema.org/specification.html), significantly reducing manual validation needs.
16
+
-**Plugin Extensibility**: Supports Ajv [plugins](https://ajv.js.org/packages/) for custom validators, adding flexibility to schemas.
17
+
-**Design Agnostic**: Provides complete freedom in structuring, styling, and managing forms.
18
+
-**Ease of Integration**: Simplifies form handling with minimal code, enhancing developer experience.
// Create a form object with initial state, schema, and optional configuration
36
+
constform=useAjvForm(
37
+
{
38
+
title:'', // initial state
39
+
},
40
+
{
41
+
type:'object', // schema
42
+
properties: {
43
+
title: {
44
+
type:'string',
45
+
minLength:5,
46
+
},
47
+
},
48
+
},
49
+
{
50
+
// optional configuration options
51
+
// refer to the table below for details
52
+
},
53
+
);
54
+
```
55
+
56
+
```jsx
57
+
// Basic input example
58
+
<input
59
+
type="text"
60
+
value={form.state.title.value}
61
+
onBlur={() =>form.onBlur('title')}
62
+
/>;
63
+
<span>{form.state.title.error}</span>;
64
+
```
65
+
66
+
This approach can become repetitive, so we advise creating a simple higher-order component (HOC) to inject these values for you. Although our library does not export any HOCs, you can easily create one as shown below:
67
+
68
+
```jsx
69
+
// Higher-Order Component to enhance form inputs
70
+
importReact, { useCallback } from'react';
71
+
// ... [HOC Code] ...
72
+
73
+
constInput=withAJVInput(YourOwnInputComponent);
74
+
<Input form={form} name="title"/>;
75
+
```
76
+
77
+
Note: The HOC example provided is just one way to enhance your experience with `use-ajv-form`. We encourage creativity and experimentation to suit your specific needs. For example, employing a factory pattern could streamline the process further. Our philosophy with `use-ajv-form` is its adaptability—it's designed to work seamlessly in any setup, with any architecture.
78
+
79
+
### Validating the Entire Form with form.validate
80
+
81
+
`useAjvForm` offers debouncing for individual inputs by default. However, you might want to validate the entire form upon submission, especially to catch any errors before processing the form data. Here's how to implement this:
82
+
83
+
```jsx
84
+
// Form submission handler that validates the form
85
+
consthandleSubmit= (e) => {
86
+
e.preventDefault();
87
+
const { isValid } =form.validate();
88
+
89
+
if (!isValid) {
90
+
// Handle invalid form state
91
+
return;
92
+
}
93
+
94
+
// Proceed with valid form data
95
+
};
96
+
97
+
<form onSubmit={handleSubmit}>
98
+
<input
99
+
type="text"
100
+
value={form.state.title.value}
101
+
onBlur={() =>form.onBlur('title')}
102
+
/>
103
+
<span>{form.state.title.error}</span>
104
+
</form>;
105
+
```
106
+
107
+
### Exports from useAJVForm
108
+
109
+
The `useAJVForm` hook provides a set of utilities and state indicators for robust form management and validation. Below is a detailed description of each export from the hook:
@@ -34,6 +133,6 @@ Below is a table describing the options you can pass to `useAJVForm`:
34
133
|`shouldDebounceAndValidate`|`boolean`| If `true`, enables debouncing for field validation. |
35
134
|`debounceTime`|`number`| Time in milliseconds for debouncing validation. Ignored if `shouldDebounceAndValidate` is set to false. |
36
135
37
-
## Usage
136
+
## Usage in Practice
38
137
39
-
Here's a basic example of using `useAJVForm`inside of our [Yail Storybook](https://yail.programmer.network/?path=/docs/input-forms--docs). Make sure to click on `Show code` to see the usage of the hook.
138
+
To see `useAJVForm`in action, visit our [Yail Storybook](https://yail.programmer.network/?path=/docs/input-forms--docs). Click on `Show code` to explore practical usage examples of the hook.
0 commit comments