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
Copy file name to clipboardExpand all lines: articles/Array-fields.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,11 @@
1
1
# Array fields
2
2
3
-
To create dynamic array fields, you should use the [`ArrayForm`](https://github.com/CodeStix/typed-react-form/wiki/ArrayForm) component or [`useArrayForm`](https://github.com/CodeStix/typed-react-form/wiki/useArrayForm) hook. These are wrappers around [`useChildForm`](https://github.com/CodeStix/typed-react-form/wiki/useChildForm) which provide useful functions and optimizations for arrays.
3
+
To create dynamic array fields, you should use the [`ArrayForm`](/docs/ArrayForm) component or [`useArrayForm`](/docs/useArrayForm) hook. These are wrappers around [`useChildForm`](/docs/useChildForm) which provide useful functions and optimizations for arrays.
If you have an array field with a constant size, you should probably just use [`ChildForm`](https://github.com/CodeStix/typed-react-form/wiki/ChildForm). (See bottom for examples)
8
+
If you have an array field with a constant size, you should probably just use [`ChildForm`](/docs/ChildForm). (See bottom for examples)
9
9
10
10
**Note on keys**: you **should** use the index as key, this seems against nature at first, but remember that this library does not rerender each time something in the array changes. When 2 array items get swapped, it does not rerender either, only when the array size changes, it rerenders. For this reason, it is not a problem (and it's recommended) to use index as the key. (This can change in the future)
11
11
@@ -177,7 +177,7 @@ function ShoppingListItemForm(props: { parent: FormState<ShoppingListItem[]>, in
177
177
178
178
## Fixed array example
179
179
180
-
A fixed array always has the same size, [`ChildForm`](https://github.com/CodeStix/typed-react-form/wiki/ChildForm) is used, and the index into the array is given using the name prop.
180
+
A fixed array always has the same size, [`ChildForm`](/docs/ChildForm) is used, and the index into the array is given using the name prop.
Copy file name to clipboardExpand all lines: articles/ArrayForm.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# ArrayForm
2
2
3
-
A component that provides array manipulation functions and optimizations. This is a wrapper around [`useArrayForm`](https://github.com/CodeStix/typed-react-form/wiki/useArrayForm). The only difference is that this component does not render its content when the array is null/undefined ([is togglable](https://github.com/CodeStix/typed-react-form/wiki/Toggling-a-field)).
3
+
A component that provides array manipulation functions and optimizations. This is a wrapper around [`useArrayForm`](/docs/useArrayForm). The only difference is that this component does not render its content when the array is null/undefined ([is togglable](/docs/Toggling-a-field)).
4
4
5
5
## Props
6
6
@@ -36,4 +36,4 @@ The render function provides an object parameter, containing the following field
36
36
37
37
## Usage
38
38
39
-
See [Array fields](https://github.com/CodeStix/typed-react-form/wiki/Array-fields).
Copy file name to clipboardExpand all lines: articles/ChildForm.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# ChildForm
2
2
3
-
Use the `ChildForm` component if you want to make fields inside an object field available to inputs. This is a wrapper around [`useChildForm`](https://github.com/CodeStix/typed-react-form/wiki/useChildForm).
3
+
Use the `ChildForm` component if you want to make fields inside an object field available to inputs. This is a wrapper around [`useChildForm`](/docs/useChildForm).
4
4
5
5
## Props
6
6
@@ -22,6 +22,6 @@ A function that renders, and creates inputs for the child form, which is passed
22
22
23
23
## Advanced
24
24
25
-
You can also use this component on array fields (index as name), but [`ArrayForm`](https://github.com/CodeStix/typed-react-form/wiki/ArrayForm) or [`useArrayForm`](https://github.com/CodeStix/typed-react-form/wiki/useArrayForm) is preferred when you want to create [dynamic array fields](https://github.com/CodeStix/typed-react-form/wiki/Array-fields). It provides useful array manipulation functions and optimizations.
25
+
You can also use this component on array fields (index as name), but [`ArrayForm`](/docs/ArrayForm) or [`useArrayForm`](/docs/useArrayForm) is preferred when you want to create [dynamic array fields](/docs/Array-fields). It provides useful array manipulation functions and optimizations.
26
26
27
27
This component does not render its content when the form is empty (happens when its parent field has been assigned `null`, `undefined` or `{}`).
Copy file name to clipboardExpand all lines: articles/FormInput.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -152,4 +152,4 @@ Make sure you pass along a `value` too, this is the value that will be set when
152
152
153
153
---
154
154
155
-
All of the input components are wrappers and abstractions around the [`useListener`](https://github.com/CodeStix/typed-react-form/wiki/useListener) hook. Using this hook, you can create your own [custom inputs](https://github.com/CodeStix/typed-react-form/wiki/Custom-inputs).
155
+
All of the input components are wrappers and abstractions around the [`useListener`](/docs/useListener) hook. Usingthis hook, you can create your own [custom inputs](/docs/Custom-inputs).
Copy file name to clipboardExpand all lines: articles/FormState.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -38,9 +38,9 @@ Maps field names to errors. Can be set with `setErrors()`.
38
38
39
39
#### `state`**(readonly)**
40
40
41
-
Gets the current form state. Form state contains variables like `isSubmitting` etc. This state is synced with parent and child forms. Can be set with [`setState()`](https://github.com/CodeStix/typed-react-form/wiki/FormState#setstatenewstate).
41
+
Gets the current form state. Form state contains variables like `isSubmitting` etc. This state is synced with parent and child forms. Can be set with [`setState()`](/docs/FormState#setstatenewstate).
42
42
43
-
See [`useForm`](https://github.com/CodeStix/typed-react-form/wiki/useForm) for a guide on how to create custom form state.
43
+
See [`useForm`](/docs/useForm) for a guide on how to create custom form state.
This library works with both **Javascript** and **Typescript**. **Typescript** is certainly preferred because of the enforced type-checking!
14
+
This library works with both **Javascript** and **Typescript**. **Typescript** is certainly preferred because of the enforced type-checking!
15
15
16
16
## Step 2: Creating a form
17
17
18
18
### Using the `useForm` hook
19
19
20
-
A form always starts with the `useForm` hook call, this function returns a form state manager ([FormState](https://github.com/CodeStix/typed-react-form/wiki/FormState)), which you must then pass to all your inputs (this is required for type-checking).
20
+
A form always starts with the `useForm` hook call, this function returns a form state manager ([FormState](/docs/FormState)), which you must then pass to all your inputs (this is required for type-checking).
21
21
22
-
All of the form hook ([`useForm`](https://github.com/CodeStix/typed-react-form/wiki/useForm), [`useChildForm`](https://github.com/CodeStix/typed-react-form/wiki/useChildForm) ...) must be called, unconditionally, at the start of your component, just like the normal React hooks.
22
+
All of the form hook ([`useForm`](/docs/useForm), [`useChildForm`](/docs/useChildForm) ...) must be called, unconditionally, at the start of your component, just like the normal React hooks.
23
23
24
24
✔️ **Importing and using `useForm`**
25
+
25
26
```jsx
26
27
import { useForm } from"typed-react-form";
27
28
@@ -36,8 +37,8 @@ function MyForm() {
36
37
**typed-react-form** does not expose any submit events or helpers, you must implement your own submitting procedure. This is typically done by using the `<form>` html element with the `onSubmit` event and using a submit button.
37
38
38
39
✔️ **`<form>` element with `onSubmit` event**
39
-
```jsx
40
40
41
+
```jsx
41
42
import { useForm } from"typed-react-form";
42
43
43
44
functionMyForm() {
@@ -52,32 +53,31 @@ function MyForm() {
52
53
if (form.error) return;
53
54
// form.values contains the modified values, form.defaultValues contains the initial values
54
55
console.log("submit", form.values);
55
-
}}
56
-
>
56
+
}}>
57
57
<button>Submit!</button>
58
58
</form>
59
59
);
60
60
}
61
-
62
61
```
63
62
64
63
You can also just use a `<button>` and submitting in the button's `onClick` handler, but this event does not fire when pressing enter in a text input!
65
64
66
65
### Creating inputs
67
66
68
-
This library is build upon the fact that only the things that change should rerender (~refresh), for example: when the *name* field changes, only the inputs that use *name* field will rerender.
67
+
This library is build upon the fact that only the things that change should rerender (~refresh), for example: when the _name_ field changes, only the inputs that use _name_ field will rerender.
69
68
70
-
The built-in form elements ([`FormInput`](https://github.com/CodeStix/typed-react-form/wiki/FormInput), [`FormSelect`](https://github.com/CodeStix/typed-react-form/wiki/FormSelect) ...) implement this by listening for changes only on their specified field. You can also use multiple inputs on the same field (they will the synchronized) and listen for changes on a field by using the [`useListener`](https://github.com/CodeStix/typed-react-form/wiki/useListener) hook or [`Listener`](https://github.com/CodeStix/typed-react-form/wiki/Listener) component.
69
+
The built-in form elements ([`FormInput`](/docs/FormInput), [`FormSelect`](/docs/FormSelect) ...) implement this by listening for changes only on their specified field. You can also use multiple inputs on the same field (they will the synchronized) and listen for changes on a field by using the [`useListener`](/docs/useListener) hook or [`Listener`](/docs/Listener) component.
71
70
72
71
You are now ready to create inputs, this library provides the following built-in components to create type-checked inputs:
**When these inputs do not satisfy your needs**, you can always [create your own](https://github.com/CodeStix/typed-react-form/wiki/Custom-inputs#example-custom-input). These built-in components are just abstractions around hook calls.
77
+
**When these inputs do not satisfy your needs**, you can always [create your own](/docs/Custom-inputs#example-custom-input). These built-in components are just abstractions around hook calls.
79
78
80
79
✔️ **Example type-checked form consisting of 2 fields**
**When you have an object or array field**, you need to *unwrap* this field by using a child/array form. When *unwrapped* you can use the inputs above.
112
+
**When you have an object or array field**, you need to _unwrap_ this field by using a child/array form. When _unwrapped_ you can use the inputs above.
-[Example: creating a submit button that disables when unmodified/error](https://github.com/CodeStix/typed-react-form/wiki/Custom-inputs#example-form-json-component)
135
-
-[Example: creating a component which shows the current form values in JSON](https://github.com/CodeStix/typed-react-form/wiki/Custom-inputs#example-form-json-component)
136
-
-[Usage with styled-components](https://github.com/CodeStix/typed-react-form/wiki/Problem-with-styled-components)
137
-
-[isSubmitting and custom form state](https://github.com/CodeStix/typed-react-form/wiki/useForm#defaultstate-optional-issubmitting-false)
138
122
123
+
-[Inputs](/docs/FormInput)
124
+
-[Using FormInput, checkboxes, radio buttons](/docs/FormInput)
125
+
-[Using FormTextArea](/docs/FormTextArea)
126
+
-[Using FormSelect](/docs/FormSelect)
127
+
-[Using FormError](/docs/FormError)
128
+
-[Toggling a field using checkbox](/docs/Toggling-a-field)
129
+
-[Example: creating custom inputs like FormInput, FormSelect ...](/docs/Custom-inputs#example-custom-input)
130
+
-[Using Object fields](/docs/Object-fields)
131
+
-[Using Array fields](/docs/Array-fields)
132
+
-[Using validators](/docs/Validation)
133
+
-[Using yup](/docs/yup)
134
+
-[Example: creating a submit button that disables when unmodified/error](/docs/Custom-inputs#example-form-json-component)
135
+
-[Example: creating a component which shows the current form values in JSON](/docs/Custom-inputs#example-form-json-component)
136
+
-[Usage with styled-components](/docs/Problem-with-styled-components)
137
+
-[isSubmitting and custom form state](/docs/useForm#defaultstate-optional-issubmitting-false)
Copy file name to clipboardExpand all lines: articles/Object-fields.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,8 +2,8 @@
2
2
3
3
To be able to create inputs for fields in objects, child form are used. You can create child forms using the `ChildForm` component or `useChildForm` hook.
Copy file name to clipboardExpand all lines: articles/Validation.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,9 +2,9 @@
2
2
3
3
A validator is a function that takes form values, and returns errors for these values in the same object structure.
4
4
5
-
You can use a validator by passing it to the [`useForm`](https://github.com/CodeStix/typed-react-form/wiki/useForm) hook.
5
+
You can use a validator by passing it to the [`useForm`](/docs/useForm) hook.
6
6
7
-
Its it recommended to use a validation library, as this makes the process of validating data mush easier. This library has [built-in support for yup](https://github.com/CodeStix/typed-react-form/wiki/yup).
7
+
Its it recommended to use a validation library, as this makes the process of validating data mush easier. This library has [built-in support for yup](/docs/yup).
0 commit comments