Skip to content

Commit

Permalink
Update README.md to reflect new seed architecture
Browse files Browse the repository at this point in the history
  • Loading branch information
sdirix authored Nov 29, 2019
1 parent 7560a7c commit 389432a
Showing 1 changed file with 17 additions and 16 deletions.
33 changes: 17 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
# JSON Forms React seed App
This seed demonstrates how to use [JSON Forms](https://jsonforms.io) with React
in order to render a simple form for displaying a task entity.
in order to render a simple form for displaying a task entity. It showcases both the
redux variant and the React standalone component (without redux).

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

Expand All @@ -16,8 +17,8 @@ Let's briefly have a look at the most important files:
* `src/uischema.json` contains the UI schema
* `src/index.js` is the entry point of the application and sets up the redux store
that contains the data, the JSON and the UI schema necessary for JSON Forms.
* `src/App.js` is the main React component and makes use of the JSON Forms Component
in order to render a form.
* `src/App.js` is the main React component and makes use of the core JSON Forms component
or the React standalone component in order to render a form.

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

We then use the `Provider` component provided by `react-redux` to provide the store to the
`App` component and all its children.
JSON Forms redux component and all its children.

```js
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
<Provider store={store}>
<JsonFormsReduxContext>
<JsonFormsDispatch />
</JsonFormsReduxContext>
</Provider>
```

## Rendering our form
The `App` component is responsible for rendering our actual form.
It does so by importing and using `DispatchRenderer` from `@jsonforms/core`.
The `App` component is responsible for rendering our actual forms.

The redux form is rendered by importing and using `DispatchRenderer` from `@jsonforms/core`.
`DispatchRenderer` expects `schema` and `uischema` props which define
the form to be rendered but if those are omitted, they will be pulled from the
store which was provided via `Provider` previously.

Since we also like to display the actual data that is being edited we
`connect` the `App` component to the store in order to extract the data
from it.
The standalone form is rendered by importing and using the `JsonForms` component and directly
handing over the `schema`, `uischema`, `data`, `renderer` and `cell` props. We listen to changes
in the form via the `onChange` callback .

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

0 comments on commit 389432a

Please sign in to comment.