Skip to content

Commit df32868

Browse files
rvsiarvsia
committed
Update field pages
1 parent 0b0b11d commit df32868

File tree

4 files changed

+82
-51
lines changed

4 files changed

+82
-51
lines changed

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

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,35 +9,43 @@ React form renderer is using [react-final-form](https://github.com/final-form/re
99
Most of its features are not directly available for consistency and performance reasons. If you want to create any custom
1010
components, you can access these features via `FieldProvider` component or `useFieldApi` hook.
1111

12-
`FieldProvider` is a wrapper using `useFieldApi` to get the access to the form state.
12+
`FieldProvider` is a wrapper using [useFieldApi](/hooks/use-field-api) to get the access to the form state. **It's recommended to use the hook.** You can read more about that in [Component mapping](/renderer/component-mapping).
1313

14-
`useFieldApi` is a wrapper around [React Final Form useField hook](https://final-form.org/docs/react-final-form/api/useField).
14+
## Props
1515

16-
You can read more about that in [Component mapping](/renderer/component-mapping).
16+
|name|type|description|
17+
|----|----|-----------|
18+
|Component|component|A component that receives all field props + meta + input.|
19+
|render|function|A render function that receives all field props + meta + input.|
1720

18-
## Implementation of component
21+
## Usage
1922

2023
Next example shows simple input field with label and error message.
2124

2225
```jsx
2326
import React from 'react';
24-
import { useFieldApi } from '@data-driven-forms/react-form-renderer'
2527

26-
const NewComponent = (props) => {
27-
const { input, meta } = useFieldApi(props);
28+
import { FieldProvider } from '@data-driven-forms/react-form-renderer';
29+
// or
30+
import FieldProvider from '@data-driven-forms/react-form-renderer/dist/cjs/field-provider';
31+
// or
32+
import FieldProvider from '@data-driven-forms/react-form-renderer/dist/esm/field-provider';
2833

29-
return (
34+
const CustomComponent = ({input, meta, label}) => (
3035
<div>
31-
<label>{props.label}</label>
36+
<label>{label}</label>
3237
<input {...input} />
3338
{meta.error && <label>{meta.error}</label>}
3439
</div>
35-
)
36-
}
40+
);
3741

38-
export default NewComponent
42+
const WrappedComponent = (props) => <FieldProvider Component={CustomComponent} {...props} />;
43+
44+
export default WrappedComponent;
3945
```
4046

47+
---
48+
4149
<InputMeta />
4250

4351
</DocPage>

‎packages/react-renderer-demo/src/pages/hooks/use-field-api.md

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,19 @@ components, you can access these features via `FieldProvider` component or `useF
1515

1616
You can read more about that in [Component mapping](/renderer/component-mapping).
1717

18-
## Implementation of component
18+
## Usage
1919

2020
Next example shows simple input field with label and error message.
2121

2222
```jsx
2323
import React from 'react';
24-
import { useFieldApi } from '@data-driven-forms/react-form-renderer'
2524

25+
import { useFieldApi } from '@data-driven-forms/react-form-renderer';
26+
// or
27+
import useFieldApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-field-api';
28+
// or
29+
import useFieldApi from '@data-driven-forms/react-form-renderer/dist/esm/use-field-api';
30+
d
2631
const NewComponent = (props) => {
2732
const { input, meta } = useFieldApi(props);
2833

‎packages/react-renderer-demo/src/pages/input-meta.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
**What are input and meta?**
22

3-
- Input
3+
**Input**
44

55
Input is an object which contains field values and methods that change form state. See the selection of most important attributes:
66

@@ -16,7 +16,7 @@ Input is an object which contains field values and methods that change form stat
1616

1717
Every user interaction that updates field value in form state should also call `input.onChange` with correct value.
1818

19-
- Meta
19+
**Meta**
2020

2121
Meta is a object which contains meta information about field with given name. There is a lot of information about every field.
2222
[Full list is here](https://final-form.org/docs/react-final-form/types/FieldRenderProps#metaactive). These are commonly used meta informations

‎packages/react-renderer-demo/src/pages/mappers/custom-mapper.md

Lines changed: 53 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,34 @@
11
import CodeExample from '@docs/code-example';
22
import DocPage from '@docs/doc-page';
3+
import InputMeta from '../input-meta.md';
34

45
<DocPage>
56

6-
# ComponentMapper
7+
# Component mapper
78

8-
In order to successfully render a form via FormRenderer you need to assign component mappers. Component mapper is an object of React components,
9-
where key is a component identifier and value is the Component. The identifiers must be equivalent to `componentTypes` in your schema.
9+
In order to successfully render a form via FormRenderer you need to assign component mappers. Component mapper is an object of React components, where key is a component identifier and value is the component or an [object](/mappers/global-component-props) with the component and globally defined props. Each component in mapper must have an unique key, which corresponds to `componentType` in the schema. Keys names can be chosen but there are some predefined [constants](/schema/constants#componenttypes) which cover most common component types. Use these to prevent typos and inconsistencies.
1010

11-
## Creating componentMapper
11+
## Creating form input components
1212

13-
Component mapper defines components that are rendered from input schema. Each component in mapper must have an unique key,
14-
which corresponds to `componentType` in the schema. Keys names can be chosen but there are some predefined constants
15-
which cover most common component types.
13+
A custom component is just a standard React component, that has access to two form state objects: **meta** and **input**.
1614

17-
```jsx
18-
import { componentTypes } from '@data-driven-forms/react-form-renderer';
19-
20-
const componentTypes = {
21-
[componentTypes.TEXT_FIELD]: 'text-field',
22-
[componentTypes.CHECKBOX]: 'checkbox',
23-
[componentTypes.SUB_FORM]: 'sub-form',
24-
[componentTypes.RADIO]: 'radio',
25-
[componentTypes.TABS]: 'tabs',
26-
[componentTypes.DATE_PICKER]: 'date-picker',
27-
[componentTypes.TIME_PICKER]: 'time-picker',
28-
[componentTypes.WIZARD]: 'wizard',
29-
[componentTypes.SWITCH]: 'switch',
30-
[componentTypes.TEXTAREA]: 'textarea',
31-
[componentTypes.SELECT]: 'select',
32-
[componentTypes.PLAIN_TEXT]: 'plain-text',
33-
}
34-
```
15+
---
16+
17+
<InputMeta />
3518

36-
You have two options how to connect your component to the form state.
19+
---
20+
21+
### Connecting component to form state
22+
23+
You have two options how to connect your component to these objects:
3724

3825
### useFieldApi
3926

40-
First, you can use `useFieldApi` hook.
27+
**Recommended**
4128

42-
This hook needs `name`, in case of special input types which are using checked as the input value (checbkoxes, switches) you have to assign `type: checkbox`. The hook will return all field props, including input and meta. [TODO: LINK TO WHAT IS INPUT AND META]
29+
First, you can use [useFieldApi](/hooks/use-field-api) hook.
30+
31+
This hook needs `name`, in case of special input types which are using checked as the input value (checbkoxes, switches) you have to assign `type: checkbox`. The hook will return all field props, including input and meta.
4332

4433
```jsx
4534
import { useFieldApi } from '@data-driven-forms/react-form-renderer';
@@ -51,8 +40,7 @@ const { input, isDisabled, label, helperText, description, meta } = useFieldApi(
5140

5241
### FieldProvider
5342

54-
Or you can import `FieldProvider` component from Data Driven Forms. This component needs to obtain `render` or `Component` prop.
55-
43+
Or you can import [FieldProvider](/components/field-provider) component from Data Driven Forms. This component needs to obtain `render` or `Component` prop.
5644

5745
```jsx
5846
import { FieldProvider } from '@data-driven-forms/react-form-renderer'
@@ -64,14 +52,17 @@ import { FieldProvider } from '@data-driven-forms/react-form-renderer'
6452
<FielProvider render={({input, meta, ...props}) => <TextField {...props} input={input} meta={meta}>}>
6553
```
6654

67-
## Example
55+
## Non-input form components
6856

69-
Below, you can see an basic implementation of custom component mapper:
70-
<br />
57+
Data Driven Forms will render any component you pass to it, so you don't have to connect components to the form state in order to render it. Be aware that the component will receive metadata props such as `component`, `validate`, etc. You have to catch them before passing to other elements, otherwise it could throw DOM warnings.
7158

72-
## Register component
59+
```jsx
60+
const Title = ({component, name, label, ...props }) => <h1 id={name} {...props}>{label}</h1>
61+
```
7362

74-
To be able to use your component in the schema, you first need to register the component in your component mapper.
63+
## Register component in component mapper
64+
65+
To be able to use your component in the schema, you need to register the component in your component mapper.
7566

7667
```jsx
7768
import NewComponent from './new-component'
@@ -81,9 +72,36 @@ const componentMapper = {
8172
}
8273
```
8374

75+
And then use the component mapper in the form renderer component:
76+
77+
```jsx
78+
import FormRenderer from '@data-driven-forms/react-form-renderer';
79+
80+
const Form = (props) => <FormRenderer
81+
componentMapper={componentMapper}
82+
{...props}
83+
/>
84+
```
85+
86+
## Example
87+
88+
Below, you can see an basic implementation of custom component mapper:
89+
8490
<CodeExample
8591
source="components/component-mapper/form-fields-mapper"
8692
mode="preview"
8793
/>
8894

95+
---
96+
97+
## Generating a component mapper
98+
99+
If you are building a new component mapper inside the Data Driven Forms repository, you can use a terminal command in the root folder to generate a basic mapper for you:
100+
101+
```bash
102+
yarn generate-template
103+
```
104+
105+
Or you can get the files directly on [GitHub](https://github.com/data-driven-forms/react-forms/tree/master/templates).
106+
89107
</DocPage>

0 commit comments

Comments
 (0)