PR review fixes

Author: rvsia

packages/react-renderer-demo/src/app/pages/renderer/component-api.md

@@ -20,7 +20,9 @@ There is very short list of that can be applied to every form field
 |component|string|Component identifier from componentMapper. Rendered component is chosen by this value|
 |hideField|boolean|Equivalent to html attribute `hidden`. Hides the field but it remains in DOM. Note that the field is still impacted by the form state. Validation will still apply on hidden field but the error message will not be displayed.|
 
-Each mapper provided in `react-forms` provides a default API for standard components. Standard components are:
+Each mapper provided in `react-forms` provides a default API for standard components. If you want to keep compatibility between our mappers and custom ones, please follow these APIs. Otherwise, it is up to you, which props you choose.
+
+Standard components are:
 <br />
 
 Wrapped in formGroup: <br/>

packages/react-renderer-demo/src/app/pages/renderer/field-provider.md

@@ -27,23 +27,19 @@ Next example shows simple input field with label and error message.
 
 ```jsx
 import React from 'react';
-import { FieldProvider } from '@data-driven-forms/react-form-renderer'
-
-const NewComponent = ({ name, ...rest }) => (
-  <div>
-    <FieldProvider {...rest} name={name}>
-      {({ input, meta, ...props }) => {
-        return (
-          <div>
-            <label>{props.label}</label>
-            <input {...input} />
-            {meta.error && <label>{meta.error}</label>}
-          </div>
-        )
-      }}
-    </FieldProvider>
-  </div>
-)
+import { useFieldApi } from '@data-driven-forms/react-form-renderer'
+
+const NewComponent = (props) => {
+  const { input, meta } = useFieldApi(props);
+
+  return (
+    <div>
+      <label>{props.label}</label>
+      <input {...input} />
+      {meta.error && <label>{meta.error}</label>}
+    </div>
+  )
+}
 
 export default NewComponent
 ```

packages/react-renderer-demo/src/app/pages/renderer/form-template.md

@@ -10,7 +10,7 @@ import ListOfContents from '../../src/helpers/list-of-contents';
 
 # FormTemplate
 
-FormTemplate component allows you to fully customize the form. FormTemplate receives only two props:
+FormTemplate component allows you to fully customize the form layout. FormTemplate receives only two props:
 
 |Prop|Description|
 |----|-----------|

packages/react-renderer-demo/src/app/pages/renderer/get-started.md

@@ -12,7 +12,7 @@ import RawComponent from '@docs/raw-component';
 Data Driven Forms converts JSON form definitions into fully functional React forms.
 It uses [React Final Form](https://github.com/final-form/react-final-form) for the form state management.
 It is highly recommended to check their documentations first to fully understand how
-the [Data Driven Dorms](https://github.com/data-driven-forms/react-forms) libraries work.
+the [Data Driven Forms](https://github.com/data-driven-forms/react-forms) libraries work.
 
 <RawComponent source="get-started/get-started" />
 

packages/react-renderer-demo/src/app/pages/renderer/migration-guide.md

@@ -34,7 +34,7 @@ Thank you for your understanding.
 ### Form Template
 
 -   layoutMapper removed - instead of it use FormTemplate
--   All props related to form buttons are now removed, use them in you FormTemplate
+-   All props related to form buttons are now removed, use them in your FormTemplate
     -   showFormControls
     -   buttonOrder
     -   disableSubmit
@@ -111,7 +111,7 @@ import { FieldArray } from  '@data-driven-forms/react-form-renderer';
 
 ### FieldProvider changed
 
--   FieldProvider is no longer wrapping basic components and you cannot access him through props, instead of it use hook:
+-   FieldProvider is no longer wrapping basic components and you cannot access it through props, instead of it use hook:
 
 ```jsx
 import { useFieldApi } from  '@data-driven-forms/react-form-renderer';

packages/react-renderer-demo/src/app/pages/renderer/validators.md

@@ -58,7 +58,7 @@ Validator inputs and results are being cached so you will get immediate feedback
 If you do not want to trigger the async validator after every stroke, you can use a debounce promise [library](https://github.com/slorber/awesome-debounce-promise)
 (or any other implementation of debouncing.)
 
-# validatorMapper
+# Custom validator mapper
 
 If you need to expand default Data Driven Forms validator types, you can use <RouterLink href="/renderer/renderer-api#optionalprops"><Link href="/renderer/renderer-api#optionalprops">validatorMapper</Link></RouterLink>.
 

packages/react-renderer-demo/src/app/src/doc-components/component-mapper/form-fields-mapper.js

@@ -93,9 +93,7 @@ const ComponentMapper = () => {
         label: 'Your password',
         type: 'password'
       }
-    ],
-    title: 'Custom form fields mapper and layout mapper',
-    description: 'If you want to see the source code, please expand the code example.'
+    ]
   };
   return (
     <div>