Add titles to articles

Author: CodeStix

articles/ArrayForm.md

@@ -1,3 +1,5 @@
+# ArrayForm
+
 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)).
 
 ## Props
@@ -20,18 +22,18 @@ A function that renders the array.
 
 The render function provides an object parameter, containing the following fields:
 
-- `form`: The child form associated with this array. Pass this to this child forms and input elements.
-- `values`: The array, you should `{map((e) => ...)}` this.
-- `setValues(values)`: A function to update all the array values at once.
+-   `form`: The child form associated with this array. Pass this to this child forms and input elements.
+-   `values`: The array, you should `{map((e) => ...)}` this.
+-   `setValues(values)`: A function to update all the array values at once.
 
 **The object also contains helper functions to quickly manipulate the array field:**
 
-- `remove(index)`: Function that removes a specific item at index in the array.
-- `clear()`: Function that clears the array.
-- `move(from, to)`: Function that moves an item in the array
-- `swap(index, newIndex)`: Function that swaps 2 items in the array.
-- `append(value)`: Function that appends an item to the end of the array.
+-   `remove(index)`: Function that removes a specific item at index in the array.
+-   `clear()`: Function that clears the array.
+-   `move(from, to)`: Function that moves an item in the array
+-   `swap(index, newIndex)`: Function that swaps 2 items in the array.
+-   `append(value)`: Function that appends an item to the end of the array.
 
 ## Usage
 
-See [Array fields](https://github.com/CodeStix/typed-react-form/wiki/Array-fields).
+See [Array fields](https://github.com/CodeStix/typed-react-form/wiki/Array-fields).

articles/ChildForm.md

@@ -1,3 +1,5 @@
+# ChildForm
+
 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).
 
 ## Props
@@ -22,4 +24,4 @@ A function that renders, and creates inputs for the child form, which is passed
 
 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.
 
-This component does not render its content when the form is empty (happens when its parent field has been assigned `null`, `undefined` or `{}`).
+This component does not render its content when the form is empty (happens when its parent field has been assigned `null`, `undefined` or `{}`).

articles/FormError.md

@@ -1,4 +1,6 @@
-A very simple field error component. 
+# `<FormError />`
+
+A very simple field error component.
 
 ```jsx
 const form = useForm(
@@ -29,7 +31,7 @@ function CustomFormError<T>(props: { form: FormState<T>; name: keyof T }) {
     const { error } = useListener(props.form, props.name);
 
     // Render nothing when no error
-    if (!error) 
+    if (!error)
         return null;
 
     // Render a styled span on error.
@@ -41,4 +43,3 @@ function CustomFormError<T>(props: { form: FormState<T>; name: keyof T }) {
 ```
 
 You can also create custom input components, look [here](https://github.com/CodeStix/typed-react-form/wiki/Custom-inputs).
-

articles/FormInput.md

@@ -1,12 +1,14 @@
+# `<FormInput />`
+
 A stateful, type-checked form `input` element.
 
 The input transforms its value based on the `type` prop, which **currently supports the following input types**:
 
-- `text`
-- `number`
-- `date` (Date and number timestamp)
-- `checkbox`
-- `radio`
+-   `text`
+-   `number`
+-   `date` (Date and number timestamp)
+-   `checkbox`
+-   `radio`
 
 It is allowed to use multiple inputs on the same field, all of them will be synchronized. These inputs are given a `className` when errored (`typed-form-error`) or modified (`typed-form-dirty`) by default.
 
@@ -82,64 +84,72 @@ Checkboxes behave like a boolean field by default, but when given a value, it be
 ### Submit
 
 You **cannot** use FormInput to create a submit button (type="submit"). Use one of the following alternatives:
-- ```jsx
-  <input type="submit" value="Click here to submit"/>
-  ```
-- ```jsx
-  <button>Click here to submit</button>
-  ```
+
+-   ```jsx
+    <input type="submit" value="Click here to submit" />
+    ```
+-   ```jsx
+    <button>Click here to submit</button>
+    ```
 
 ## Props
 
 #### `form` **(required)**
+
 The form or child form that contains the field to bind to this input.
 
-***
+---
 
 #### `name` **(required)**
+
 The name of the field in the form that will be bound to this input.
 
-***
+---
 
 #### `errorClassName` and `errorStyle`
+
 The className and/or style to set when there is an error on this field. Default className is `typed-form-error`.
 
-***
+---
 
 #### `dirtyClassName` and `dirtyStyle`
+
 The className and/or style to set when this field has been modified. Default className is `typed-form-dirty`.
 
-***
+---
 
 #### `disableOnSubmitting`
+
 Disable this input on submit? Default is `true`.
 
-***
+---
 
 #### `dateAsNumber` (only type="date")
+
 Serialize this fields value as a timestamp instead of a Date object.
 
-***
+---
 
 #### `hideWhenNull`
 
 Set this prop if you want to hide this input when its field value is `null/undefined`. Default is `false`.
 
-***
+---
 
 #### `setNullOnUncheck` and `setUndefinedOnUncheck` (only type="checkbox")
+
 When using one of these props, the checkbox will set null/undefined on the field when unchecked. This prop is only valid for checkboxes. (Can mimic the same behaviour with radio buttons using value props).
 
 Make sure you pass along a `value` too, this is the value that will be set when it gets checked again. Not doing so, will cause a console warning.
 
-***
+---
 
 #### `value` (only type="radio" or type="checkbox")
-- The value of the radio button when using multi-value fields.
-- The value of the checkbox when using primitive arrays.
-- The on-checked value of the checkbox when using the `setNullOnUncheck/setUndefinedOnUncheck` prop.
 
-***
+-   The value of the radio button when using multi-value fields.
+-   The value of the checkbox when using primitive arrays.
+-   The on-checked value of the checkbox when using the `setNullOnUncheck/setUndefinedOnUncheck` prop.
 
-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).
+---
 
+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).

articles/FormSelect.md

@@ -1,3 +1,5 @@
+# `<FormSelect />`
+
 A stateful, type-checked form `select` element.
 
 These inputs are given a `className` when errored (`typed-form-error`) or modified (`typed-form-dirty`) by default.
@@ -27,30 +29,35 @@ const form = useForm({
 ## Props
 
 #### `form` (required)
+
 The form or child form that contains the field to bind to this select input.
 
-***
+---
 
 #### `name` (required)
+
 The name of the field in the form that will be bound to this select input.
 
-***
+---
 
 #### `errorClassName` and `errorStyle`
+
 The className and/or style to set when there is an error on this field. Default className is `typed-form-error`.
 
-***
+---
 
 #### `dirtyClassName` and `dirtyStyle`
+
 The className and/or style to set when this field has been modified. Default className is `typed-form-dirty`.
 
-***
+---
 
 #### `disableOnSubmitting`
+
 Disable this select input on submit? Default is `true`.
 
+---
 
-***
 #### `hideWhenNull`
 
 Set this prop if you want to hide this input when its field value is `null/undefined`. Default is `false`.

articles/FormState.md

@@ -1,25 +1,31 @@
+# `FormState`
+
 The `FormState` class contains all the state of a form. This includes values, default values, errors, dirty flags and form state. You should always use the `useForm` or `useChildForm` hooks to create an instance of this class.
 
 This class provides a lot of useful functions to manipulate form values and state.
 
 ## Properties
 
 #### `values` **(readonly)**
+
 The values of the form. Can be set with `setValues()`.
 
 ---
 
 #### `defaultValues` **(readonly)**
+
 The default values of the form. Input elements do not change this. This gets used to reset the form and to calculate dirty flags. Can be set with `setDefaultValues()`.
 
 ---
 
 #### `childMap` **(readonly)**
+
 Each child form bound registers itself in this object. It maps field names to `ChildFormState` instances.
 
 ---
 
 #### `dirtyMap` **(readonly)**
+
 Maps field names to dirty values. A field is dirty when its value is not equal anymore to its default value.
 
 ---
@@ -66,29 +72,29 @@ The form's validator.
 
 Sets a field value or default value.
 
-- `name` **(required)**: The field name to set a value for.
-- `value` **(required)**: The new value for the field.
-- `validate` **(optional)**: Validate? When defined, overrides `validateOnChange`. 
-- `isDefault` **(optional, false)**: When true, updates the default value instead of the normal value.
+-   `name` **(required)**: The field name to set a value for.
+-   `value` **(required)**: The new value for the field.
+-   `validate` **(optional)**: Validate? When defined, overrides `validateOnChange`.
+-   `isDefault` **(optional, false)**: When true, updates the default value instead of the normal value.
 
 ---
 
 #### `setValues(values, validate = true, isDefault = false, notifyChild = true, notifyParent = true)`
 
-Sets values *OR* default values for a form.
+Sets values _OR_ default values for a form.
 
-- `values` **(required)**: The new values/default values to set on this form.
-- `validate` **(optional)**: Validate? When defined, overrides `validateOnChange`. 
-- `isDefault` **(optional, false)**: When true, updates the default values instead of the normal values. Only updates one or the other, to set both at the same time, use `setDefaultValues()` or 2 function calls.
+-   `values` **(required)**: The new values/default values to set on this form.
+-   `validate` **(optional)**: Validate? When defined, overrides `validateOnChange`.
+-   `isDefault` **(optional, false)**: When true, updates the default values instead of the normal values. Only updates one or the other, to set both at the same time, use `setDefaultValues()` or 2 function calls.
 
 ---
 
 #### `setDefaultValues(values, validate = true, notifyChild = true, notifyParent = true)`
 
-Set both values *AND* default values for a form. If you only want to set default values, use `setValues(...,...,true)`.
+Set both values _AND_ default values for a form. If you only want to set default values, use `setValues(...,...,true)`.
 
-- `values` **(required)**: The new values to set on this form.
-- `validate` **(optional)**: Validate? When defined, overrides `validateOnChange`. 
+-   `values` **(required)**: The new values to set on this form.
+-   `validate` **(optional)**: Validate? When defined, overrides `validateOnChange`.
 
 ---
 
@@ -102,36 +108,38 @@ Force validation on this form. Required when `validateOnChange` is disabled. Tak
 
 Set an error on a specific field in this form.
 
-- `name` **(required)**: The field name to set an error on.
-- `error` **(required)**: The error to set.
+-   `name` **(required)**: The field name to set an error on.
+-   `error` **(required)**: The error to set.
 
 ---
 
 #### `setErrors(errors, notifyChild = true, notifyParent = true)`
 
 Set all the errors on this form and child forms.
 
-- `errors` **(required)**: The new errors for this form. Use {} to clear errors. **The format of this error object must follow the same structure of the values object, but each value is replaced by its error.**
+-   `errors` **(required)**: The new errors for this form. Use {} to clear errors. **The format of this error object must follow the same structure of the values object, but each value is replaced by its error.**
 
 ---
 
 #### `resetAll(validate = true, notifyChild = true, notifyParent = true)`
+
 Resets the values in this form to the default values. Causes validation.
 
 ---
 
 #### `reset(name, validate = true, notifyChild = true, notifyParent = true)`
+
 Reset a specific field in this form to its default value.
 
-- `name` **(required)**: The field to reset to its default value.
+-   `name` **(required)**: The field to reset to its default value.
 
 ---
 
 #### `setState(newState)`
 
 Updates the state of this form, this causes every input to rerender. This also updates the state in parent and child forms **by default**.
 
-- `newState` **(required)**: The new form state.
+-   `newState` **(required)**: The new form state.
 
 ---
 
@@ -153,4 +161,4 @@ The parent form of this form. Which is a `FormState` or `ChildFormState` instanc
 
 #### `name`
 
-The name of this form, which is the name of the field in the parent form which this child form represents. 
+The name of this form, which is the name of the field in the parent form which this child form represents.