1
1
This project was bootstrapped with [ Create React App] ( https://github.com/facebookincubator/create-react-app ) .
2
2
# JSON Forms React seed App
3
3
This seed demonstrates how to use [ JSON Forms] ( https://jsonforms.io ) with React
4
- in order to render a simple form for displaying a task entity.
4
+ in order to render a simple form for displaying a task entity. It showcases both the
5
+ redux variant and the React standalone component (without redux).
5
6
6
7
It is based on create-react-app and only contains minor modifications.
7
8
@@ -16,8 +17,8 @@ Let's briefly have a look at the most important files:
16
17
* ` src/uischema.json ` contains the UI schema
17
18
* ` src/index.js ` is the entry point of the application and sets up the redux store
18
19
that contains the data, the JSON and the UI schema necessary for JSON Forms.
19
- * ` src/App.js ` is the main React component and makes use of the JSON Forms Component
20
- in order to render a form.
20
+ * ` src/App.js ` is the main React component and makes use of the core JSON Forms component
21
+ or the React standalone component in order to render a form.
21
22
22
23
The [ data schema] ( https://github.com/eclipsesource/jsonforms-react-seed/blob/master/src/schema.json ) defines
23
24
the structure of a Task: it contains attributes such as title, description, due date and so on.
@@ -45,7 +46,7 @@ const store = createStore(
45
46
uischema
46
47
},
47
48
renderers: JsonForms .renderers ,
48
- fields : JsonForms .fields
49
+ cells : JsonForms .cells
49
50
},
50
51
},
51
52
applyMiddleware (thunk)
@@ -64,27 +65,27 @@ store.dispatch(Actions.validate());
64
65
```
65
66
66
67
We then use the ` Provider ` component provided by ` react-redux ` to provide the store to the
67
- ` App ` component and all its children.
68
+ JSON Forms redux component and all its children.
68
69
69
70
``` js
70
- ReactDOM .render (
71
- < Provider store= {store}>
72
- < App / >
73
- < / Provider> ,
74
- document .getElementById (' root' )
75
- );
71
+ < Provider store= {store}>
72
+ < JsonFormsReduxContext>
73
+ < JsonFormsDispatch / >
74
+ < / JsonFormsReduxContext>
75
+ < / Provider>
76
76
```
77
77
78
78
## Rendering our form
79
- The ` App ` component is responsible for rendering our actual form.
80
- It does so by importing and using ` DispatchRenderer ` from ` @jsonforms/core ` .
79
+ The ` App ` component is responsible for rendering our actual forms.
80
+
81
+ The redux form is rendered by importing and using ` DispatchRenderer ` from ` @jsonforms/core ` .
81
82
` DispatchRenderer ` expects ` schema ` and ` uischema ` props which define
82
83
the form to be rendered but if those are omitted, they will be pulled from the
83
84
store which was provided via ` Provider ` previously.
84
85
85
- Since we also like to display the actual data that is being edited we
86
- ` connect ` the ` App ` component to the store in order to extract the data
87
- from it.
86
+ The standalone form is rendered by importing and using the ` JsonForms ` component and directly
87
+ handing over the ` schema ` , ` uischema ` , ` data ` , ` renderer ` and ` cell ` props. We listen to changes
88
+ in the form via the ` onChange ` callback .
88
89
89
90
## Custom renderers
90
91
Please see [ our corresponding tutorial] ( https://jsonforms.io/docs/tutorial ) on how to add custom renderers.
0 commit comments