Skip to content

Commit 389432a

Browse files
authored
Update README.md to reflect new seed architecture
1 parent 7560a7c commit 389432a

File tree

1 file changed

+17
-16
lines changed

1 file changed

+17
-16
lines changed

README.md

+17-16
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
22
# JSON Forms React seed App
33
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).
56

67
It is based on create-react-app and only contains minor modifications.
78

@@ -16,8 +17,8 @@ Let's briefly have a look at the most important files:
1617
* `src/uischema.json` contains the UI schema
1718
* `src/index.js` is the entry point of the application and sets up the redux store
1819
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.
2122

2223
The [data schema](https://github.com/eclipsesource/jsonforms-react-seed/blob/master/src/schema.json) defines
2324
the structure of a Task: it contains attributes such as title, description, due date and so on.
@@ -45,7 +46,7 @@ const store = createStore(
4546
uischema
4647
},
4748
renderers: JsonForms.renderers,
48-
fields: JsonForms.fields
49+
cells: JsonForms.cells
4950
},
5051
},
5152
applyMiddleware(thunk)
@@ -64,27 +65,27 @@ store.dispatch(Actions.validate());
6465
```
6566

6667
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.
6869

6970
```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>
7676
```
7777

7878
## 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`.
8182
`DispatchRenderer` expects `schema` and `uischema` props which define
8283
the form to be rendered but if those are omitted, they will be pulled from the
8384
store which was provided via `Provider` previously.
8485

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 .
8889

8990
## Custom renderers
9091
Please see [our corresponding tutorial](https://jsonforms.io/docs/tutorial) on how to add custom renderers.

0 commit comments

Comments
 (0)